移动设备浏览器屏幕尺寸适配

移动设备的物理分辨率和显示分辨率是有区别的，物理分辨率越来越高为了保证可阅读性实际显示时用一个固定的缩放因子进行的缩放对应一个可阅读的分辨率。

为什么我编写的html在电脑上显示字体正常，而在手机中显示的非常小？
怎样编写手机和PC上都可以使用的界面（有争议）？
...?

HTML中的相关尺寸

为了搞清楚浏览器的一些尺寸，做了以下测试：

<script>
    document.writeln("Screen:" + window.screen.width + 
        ", Ratio:" + window.devicePixelRatio);
    document.writeln(", offsetWidth:" + document.body.offsetWidth +
        ", clientWidth:" + document.body.clientWidth + 
        ", scrollWidth:" + document.body.scrollWidth)
</script>

所涉及的设备及测试结果如下，包括电脑、手机和Pad设备：

小米平板2：物理分辨率 2048 x 1536

竖屏模式 Screen: 768, Ratio: 2, offsetWidth: 980, clientWidth: 980, scrollWidth: 980

横屏模式 Screen: 1024, Ratio: 2, offsetWidth: 980, clientWidth: 980, scrollWidth: 980

iPad2：物理分辨率 1024 x 768

竖屏模式 Screen: 768, Ratio: 2, offsetWidth: 980, clientWidth: 980, scrollWidth: 980

横屏模式与竖屏一样

iPad Air 2：物理分辨率 2048x1536

结果与iPad2一样

华为畅享7S：物理分辨率 2160x1080

竖屏模式 Screen: 360, Ratio: 3, offsetWidth: 980, clientWidth: 980, scrollWidth: 980

横屏模式 Screen: 720, Ratio: 2, offsetWidth: 980, clientWidth: 980, scrollWidth: 980

Macbook Pro Retina 15寸：物理分辨率 2880 x 1800

浏览器宽度全屏模式：Screen:1440, Ratio:2 offsetWidth:1440, clientWidth:1440, scrollWidth:1440

浏览器宽度非全屏：Screen:1440, Ratio:2 offsetWidth:1437, clientWidth:1437, scrollWidth:1437

组装PC机24寸显示：物理分辨率 1920 x 1080

浏览器宽度全屏模式：Screen:1920, Ratio:2 offsetWidth:1920, clientWidth:1920, scrollWidth:1920

浏览器宽度非全屏：Screen:1920, Ratio:2 offsetWidth:1720, clientWidth:1720, scrollWidth:1720

可以得出结论，移动设备在默认的内容区域的宽度是按照"980px"进行输出的，所以在尺寸小的屏幕中看起来文字和图片都很小，这个不符合移动设备的显示。

关于Screen宽度：Android设备中横屏和竖屏时获取的数值是不一样的，横屏时比较大，不同设备也不一样。iOS设备的值横竖屏时都一样固定为768px，Screen的值是为了保证设备阅读体验而根据因子缩放后的分辨率，使用这个分辨率将获得比较合理的显示大小。

使用viewport优化显示

如何在HTML使用Screen对应的分辨率？这里要用到viewport，在viewport中指定width为device-width就可以了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, viewport-fit=cover">

完成后后我们再次测试：

小米平板2：物理分辨率 2048 x 1536

竖屏模式 Screen: 768, Ratio: 2, offsetWidth: 768, clientWidth: 768, scrollWidth: 768

横屏模式 Screen: 1024, Ratio: 2, offsetWidth: 1024, clientWidth: 1024, scrollWidth: 1024

iPad2：物理分辨率 1024 x 768

竖屏模式 Screen: 768, Ratio: 2, offsetWidth: 1024, clientWidth: 1024, scrollWidth: 1024

横屏模式 Screen: 768, Ratio: 2, offsetWidth: 1024, clientWidth: 1024, scrollWidth: 1024

iPad Air 2：物理分辨率 2048x1536

结果与iPad2一样

华为畅享7S：物理分辨率 2160x1080

竖屏模式 Screen: 360, Ratio: 3, offsetWidth: 360, clientWidth: 360, scrollWidth: 360

横屏模式 Screen: 720, Ratio: 2, offsetWidth: 678, clientWidth: 678, scrollWidth: 678

Macbook Pro Retina 15寸：物理分辨率 2880 x 1800

与未设置前一致

组装PC机24寸显示：物理分辨率 1920 x 1080

与未设置前一致

注：iOS设备中的Screen一直保持为768，但是实际显示时竖屏和横屏的分辨率在显示时做了相应的变化，请注意观察测试结果。

至此HTML页面在移动设备上的字符大小和图片大小的可阅读性上得到了解决，但是对于移动设备的横屏、竖屏等当尺寸差异较大时展现方式还是得有一定的区别对待才能得到更好的体验。

响应式布局

解决不同显示尺寸内容适配问题，这里的主角是CSS，根据屏幕宽度设置不同的布局模式。

/* screen < 900px */
@media screen and (max-width: 900px) {
    #content-r2c1{ float: none; width: 100%}
    #content-r2c2{ float: none; width: 100% }
}

上面是屏幕尺寸 < 900 时，取消原来的浮动的左右布局，改成上下，剩下的就简单了。。。

说明：一般有max-width和max-device-width，我们直接使用max-width就行了，因为之前设置了viewport

首页 » 移动设备浏览器屏幕尺寸适配

HTML中的相关尺寸

使用viewport优化显示

响应式布局

相关内容