IT博客汇 | 移动端屏幕适配viewport

移动端屏幕适配viewport

李惟发表于 2014-12-10 10:43:57

pc上的网站在移动端上怎么办？

如果把移动端的可视区域(320-768)的话，大部分网站都会因为太窄而显示错乱；

所以浏览器默认把viewport设置为一个较宽的值 980px或1024px，至少保证PC网站在移动端上可以显示，只不过出现了横向滚动条而已。

几个概念

css像素
- html中度量的单位用“px”来计算，在“pc”中往往 “1 css像素” ＝ “1 物理像素”
- 在不同设备中1px对应不同的“设备像素”；iphone3分辨率是“320×480”即 “1 css像素” ＝“1 物理像素”；iphone4 分辨率“640×960”，但屏幕尺寸没有改变，意味着同一块区域像素多了1倍。即：“2 css像素” ＝ “1 物理像素”；
物理像素
- 表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像
分辨率
- 显示器所能显示的像素多少，显示器可以显示的像素越多，画面就越精细，同样的屏幕区域能显示的信息就越多
devicePixelRatio“window.devicePixelRadio = 物理像素/css像素” 在iphone4中“devicePixelRatio＝2” 也就是“1css像素＝2个物理像素”

devicePixelRatio在不同浏览器中存在一些兼容性问题，并不是完全可靠的
layout viewport
- 移动设备的默认“viewport”，css布局是以“layout viewport”来做为参考系计算的
- “document.documenElement.clientWidth”获取
- 该尺寸时动态设置
visual viewport
- 代表浏览器窗口的尺寸，当用户放大浏览器时这个尺寸就会变小
- “window.innerWidth”获取
ideal viewport
- “屏幕尺寸”设备屏幕的尺寸单位是“物理像素”
- “screen.width”获取屏幕尺寸是不变的
- 在该“viewport”中用户不需要缩放和横向滚动就可以正常查看网站的所有内容
- 设置移动端网站一般以这个“viewport”为准，“ideal viewport”的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对“ideal viewport”设计的网站都可以完美的呈现给用户。

如何来实现屏幕适配

需要用到

meta viewport 中有6个通用属性：

“width”设置“layout viewport”的宽度正整数或字符串“width-device”
“initial-scale”设置页面的初始缩放值，数字或小数
“minimum-scale”允许用户的最小缩放值数字或小数
“maximum-scale”允许用户的最大缩放值数字或小数
“height”设置“layout viewport”的高度，这个属性很少用到
“user-scaleabel”是否允许用户进行缩放“no”或“yes”还有2个需要特别注意的两个属性

“target-densitydpi”在andriod 4.0一下的设备中，不支持设置“viewport”的“width”，android 自带浏览器支持设置 target-densitydpi来达到目的；

target-densitydpi = UI-width / device-width * window.devicePixelRation * 160
// UI-width: 布局宽度
// device-width:屏幕分辨率宽度 iphone4为640
// target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放

“miniual-ui ios”的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏

代码讲解

// 移动页面设计 480*854的比例 
// dpi = 480/screen.width*window.devicePixelRatio*160;
// scalevalue = screen.width/480;
// 控制适配 分为5种组合

/* width ＋ target-densitydpi(计算出来的) */


/* width */


/* width+target-densitydpi=device-dpi */


/* width+initial-scale */


/* targrt-densitydpi */


// 通过顺序设置5次来实现适配 直到小于等于10表示viewport设置正确了。
Math.abs(window.innerWidth - 480) <= 10;

横竖屏

js代码控制

// 建议执行横竖屏的事件都通过一个侦听完成，做一个统一的管理；在屏幕横竖屏切换完成之后再执行相应的事件
window.addEventListener("orientationchange",function () {
    This.isOrietation = true;
    This.changeOriention();
});

css控制

// 定义横屏显示的样式
@media screen and(orientation:landspace){...}

// 定义竖屏显示的样式
@media screen and(orientation:portrait){...}

// 某个尺寸的特殊样式 竖屏时宽度为768px 符合一般ipad的条件
@media only screen and(orientation:portrait) and(device-width:768px){...}