本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> web前端技术
立即购买视频教程 移动端视口的相关概念及其适配方案
夜鹰教程网 来源:www.yyjcw.com 日期:2018-7-7 10:27:45
移动端视口的相关概念及其适配方案

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



视口

在前一段时间,我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发,对viewport有了新的理解。于是,打算重新写一篇文章,介绍移动端视口的相关概念。


关于这篇文章说到的所有知识,本质上离不开以下代码


<meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />


@media all and (max-width: 320px) {

    // do something

}

了解过移动端开发的朋友,其实对以上的代码就不会陌生。上面的代码,主要涉及到meta视口标签与媒体查询。单单以上简短的代码就需要明白:


像素(pixel)

视口(viewport)

分辨率(resolution)

meta视口标签

媒体查询(media query)

JavaScript相关的属性和方法

如何实现移动端响应式适配的问题

那就进入主题吧:)


像素


在移动端上,所谓的像素分为两种


CSS像素:CSS像素就是我们在编写CSS代码时的像素。

设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。

1个CSS像素等于多少个设备像素取决于屏幕特性(是否是高清屏)和用户缩放的比例。当用户将屏幕从100%放大到200%时,1个CSS像素等于2个设备像素,反之相反;当屏幕为Retina高清屏(如iPhone6,dpr=2)时,1个CSS像素就等于2个设备像素,反之相反。


需要明白一点的是,2个设备像素并不是说它扩大了两倍,而是说在页面上仍然显示的是1px(1个CSS像素),但是这1px是由2个设备像素组成。像素点变多了,因此图像会变得更加清晰。下面这幅图大致说明了CSS像素和设备像素的区别。



视口


在移动端上,存在三种不同的视口。


布局视口:在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕。在移动端,默认情况下,布局视口等于浏览器窗口宽度。布局视口限制了CSS的布局。在JavaScirpt上获取布局视口的宽度可以通过document.documentElement.clientWidth | document.body.clientWidth得到。


视觉视口:视觉视口是用户正在看到的区域。用户可以缩放来操作视觉视口,而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。在JavaScript上获取视觉视口的宽度可以通过`window.innerWidth得到。

在PC端上,视觉视口等于布局视口的宽度,无论用户是放大屏幕还是缩小屏幕,这两个视口的宽度仍然相等。但是,在移动端上,并非如此。缩放屏幕的过程实质上就是CSS像素缩放的过程。当用户将屏幕放到到两倍时,视觉视口变小了(因为视觉视口中CSS像素变少了),而每单位的CSS像素却变大了,因此1px(1个CSS像素)等于2个设备像素。同理,当为iPhone6(dpr=2)时,视觉视口中CSS像素变少了,但是1px等于2个设备像素。当用户缩小屏幕时也是同样的道理。缩放的过程并不会影响布局视口的大小。


也就是说,高清屏(dpr>=2)或屏幕放大时,视觉视口变小(CSS像素变少),每单位的CSS像素等于更多的设备像素;非高清屏(dpr<2)

或屏幕缩小时,视觉视口变大(CSS像素变多),每单位的CSS像素等于更少的设备像素。

但是无论放大或缩小屏幕,布局视口的宽度仍然保持不变。


理想视口:由于默认情况下布局视口等于浏览器窗口宽度,因此在移动端上需要通过放大或缩小视觉视口来查看页面内容,这当然体验糟糕啊!因此在移动端引入了理想视口的概念。理想视口的出现必须需要设置meta视口标签,此时布局视口等于理想视口的宽度。常见的,iPhone6的理想视口为375px * 667px,iPhon6 plus的理想视口为414px * 736px。在JavaScript上获取视觉视口的宽度window.screen.width得到。


<meta name="viewport" content="width=device-width" />

当设置了meta视口标签之后,iPhone6的布局视口宽度将等于375px,iPhone6plus布局视口的宽度等于414px。其他移动设备相似。


理想视口会随着屏幕的旋转而改变。当iPhone6为肖像模式时(即竖屏),此时理想视口为375px * 667px;但为横屏模式时,此时理想视口为667px * 375px。


分辨率与设备像素比


分辨率是指每英寸内点的个数,单位是dpi或者dppx。设备像素比是指设备像素与理想视口宽度的比值,没有单位。


分辨率在CSS上可以通过resolution属性设置。一般情况下会使用dpi作为分辨率的单位,因为dppx并非所有浏览器都支持。


而设备像素比在CSS上可以通过device-device-pixel-ratio属性设置,而在JavaScript上可以通过window.devicePixelRatio属性获取。


同时,1dpr=96dpi。举个例子。在iPhon6下,理想视口宽度为375px,而设备像素为750px,因此此时设备像素比为2,分辨率为192dpi。因此如果为iPhon6以下的设备写某个特定样式,可以这样写


// 注意,device-pixel-ratio需要带上-webkit-前缀,保证浏览器兼容性问题。

@media all and (max-width: 375px) and (-webkit-max-device-pixel-ratio: 2) {

    body {

        background-color: red;

    }

}

或者

@media all and (max-width: 375px) and (max-resolution: 192dpi) {

    body {

        background-color: red;

    }

}

meta视口标签


meta视口标签是是设置理想视口的重要元素,主要用于将布局视口的尺寸和理想视口的尺寸相匹配。meta视口标签存在5个指令


width:设置布局视口的宽度,一般设为device-width。

initial-scale:初始缩放比例。1即100%,2即200%,以此类推

maximum=scale:最大缩放比例。

minimum-scale:最小缩放比例。

user-scalable:是否静止用户进行缩放,默认为no。

需要注意的是,缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说,当你将屏幕放到到2倍时,视觉视口为理想视口的一半,此时每单位的CSS像素等于2个设备像素。缩小时则相反。


响应式适配问题

理解了一些基本概念之后,我们来看看如何实现响应式适配。


一般情况下,前端开发工程师会根据设计师给的设计稿进行开发。而设计稿一般是根据iPhon6手机进行页面的设计的。我们知道iPhone6的理想视口宽度为375px,同时iPhone6的设备像素比为2,设备像素为750px。我们需要在只有一份设计稿的情况下写出适应各种屏幕不一的终端设备,因此需要一些移动端响应式适配的方案。此时需要用到的一个单位是REM。简单的说,REM会根据HTML元素的font-size进行设置。当HTML元素的font-size: 16px时,1rem = 16px, 1.5rem = 24px


个人总结出了两套响应式适配的方案(前提是设置meta视口标签)。两套方案由一个共同点:给定一个基准值。


假如现在拿到的设计稿是根据iPhone6进行设计的。


方案一


方案一是设计稿给什么尺寸,我们就将其缩小100倍,最后换算成rem单位。比如,设计稿上某个title的font-size为32px,此时写CSS样式时就直接缩小100倍,即0.32rem。


由于rem是根据根元素进行设置的,所以我们需要设置根元素的font-size。


给HTML设置font-size的基本思路:


通过window.screen.width获取不同移动设备的理想视口宽度。

规定基准值为750px(此值为iPhon6的设备像素)。

(1) / (2) * 100即得到HTML元素的font-size。(乘于100是因为我们在前面将字体缩小了100倍,此时要乘回来)

换算成公式即:设计稿尺寸 / 100 * (不同设备的理想视口宽度 / 基准值 * 100)


举个例子。


// 根据不同设备的理想视口宽度动态设置根元素的`font-size`。

let idealViewWidth = window.screen.width;

const BASICVALUE = 750;

document.documentElement.style.fontSize = (idealViewWidth / BASICVALUE) * 100 + 'px';

因此,在不同设备下的HTML元素的font-size大小和实际像素如下


iPhone5 : (320 / 750) * 100 = 42.667px

iPhone6 : (375 / 750) * 100 = 50px

iPhone6+: (414 / 750) * 100 = 55.2px


假如设计稿上标注.title类上的字体为32px,此时有

iPhone5上的某字体:  42.667 * 0.32rem = 13.653px

iPhone6上的某字体: 50 * 0.32rem = 16px

iPhone6+上的某字体: 55.2 * 0.32rem = 17.664px

可以看出,在不同设备下,同一字号的字体使用rem单位可以实现不同设备的响应式适配。不单单在字体上可以使用,在移动端上的width、height等涉及单位的都可以使用。这样的话,就可以在不同设备下完美的复现设计稿的要求。


方案二


此方案使用了SASS预处理器。基本思路:


设置根元素的font-size。通过获取不同设备的理想视口宽度,再除以10。(除以10是因为不想font-size太大。)

给定基准值,此时给的基准值为75px(此值为iPhone6的设备像素除以10)

写SASS Function

代码如下


SASS

@function px2rem ($value) {

    $para: 75px;

    @return $value / $para + rem;

}


JS

let idealViewWidth = window.screen.width;

document.documentElement.style.fontSize = idealViewWidth / 10 + 'px';


在不同设备下根元素的`font-size`:


iPhone5 : 320px / 10 = 32px

iPhone6 : 375px / 10 = 37.5px

iPhone6+: 414px / 10 = 41.4px


根据以上,可以看一个例子。某设计稿下5个li,横向排布,每个的宽度为200px

CSS

@import (路径名)

iPhone5: li { width: px2rem(200px) } => width: 85.333px

// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (320 / 10) = 85.3333px

iPhone6: li { width: px2rem(200px) } => width: 100px

// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (375 / 10) = 100px

iPhone6+: li { width: px2rem(200px) } => width: 4138px

// 此时(200px / 75px = 2.667rem) 2.667rem = 2.667 * (414 / 10) = 110.4138px


因此,一个200px的(实际只有100px)的li元素的宽度在不同设备下显示了不同的宽度,实现了响应式适配的问题。

方案三


方案三与前两个方案不相同,此方案并不需要给根元素设置font-size,不需要基准值。此方案是根据不同设备的dpr来实现页面的缩放的。


基本思路如下:


通过window.devicePixelRatio获取设备的dpr

根据不同的dpr缩放页面,动态设置meta视口标签。(缩放是放大或缩小CSS的过程,根据理想视口进行缩放,与视觉视口方向相反)

代码如下:


let dpr = window.devicePixelRatio;

let meta = document.createElement('meta');

let initialScale = 1 / dpr;

let maximumScale = 1 / dpr;

let minimumScale = 1 / dpr;

meta.setAttribute('name', 'viewport');

meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${initialScale}, maximum-scale=${maximumScale}, minimum-scale=${minimumScale}`);

document.head.appendChild(meta);


因此,可以直接根据设计稿的尺寸写CSS样式,如设计稿下有5个li元素,宽度为200px,此时不同设备下li的宽度


iPhone5 : li { width: 200px } 实际宽度为:100px

iPhone6 : li { width: 200px } 实际宽度为:100px

iPhone6+: li { width: 200px } 实际宽度为:66.667px

以上三种方法解决了大部分移动端响应式适配的问题,但是在1px问题上,使用以上的方法仍然(除了第三个方案),都不能很好的解决1px的问题。有时间写一篇文章介绍如何解决1px的问题。


复制链接 网友评论 收藏本文 关闭此页
上一条: 新手所必须掌握的前端知识汇总  下一条: 上传图片立即预览
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
金三银四跳槽季—前端面试汇总
Sublime常用插件汇总(全)
大前端学习路线
如何克服前端学习进步慢的问题
web前端常见基础问题
阿里前端面试经历(转载)
Web前端需要掌握技术汇总(转)
ESLint详解-让你的代码更加规范
通过userAgent适配 PC端和移动端网…
js操作DOM中需要注意的问题
Promise编程简介
Emmet语法和实例
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3