页面设计时如何适配各手机浏览器-viewport的使用

设计手机界面时,因各手机的分辨率以及密度值不同所以默认在各手机上面的显示也不尽相同,甚至显示比较糟糕。viewport的出现则就是为了解决这个问题,其作用如下:

浏览器根据设定的viewport属性width,显示时动态缩小或者放大页面使内容看起来完全适配,缩放的比率值是:window.screen.availWidth/viewport.width

假如页面设计宽度是720px,则使用如下设置:

<meta name="viewport" content="width=720, user-scalable=no" />

注意:

1、请勿随意设定初始缩放的值initial-scale,浏览器会根据这个值进行初始缩放,如果不是当前浏览器最佳缩放的值则页面会不适配。

2、请勿对body设定宽度,否则会使页面适配失效。

3、使用js获取到的界面中的元素宽高值不受浏览器缩放的影响,即:设定一个div是100px宽度,则在不同手机上面不管如何缩放,使用js获取宽度时仍然是100px。


一下是实际测试结果

测试手机参数:小米4、1080p分辨率

手机的dp参数:

Configuration conf = getResources().getConfiguration();
System.out.println("Wdp: "+conf.screenWidthDp);    // 输出: 360
System.out.println("Hdp: "+conf.screenHeightDp);   // 输出: 620

测试一

html页面代码如下,设定页面宽度720px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=720, user-scalable=no" />
<style>
 *{padding: 0;margin: 0;} 
</style>
</head>
<body>
<div id="container" style="width: 720px;">
<div style="width: 240px;height: 100px;background-color: yellow;float:left"></div>
<div style="width: 240px;height: 100px;background-color: #00ff00;float:left"></div>
<div style="width: 240px;height: 100px;background-color: gray;float:left"></div>
</div>
<div style="clear: both;">
<script>
document.write(
"屏幕分辨率为:"+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽:"+document.body.clientWidth
+"<br />"+
"网页可见区域高:"+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽):"+document.body.offsetWidth 
+"<br />"+
"网页可见区域高(包括边线的宽):"+document.body.offsetHeight 
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft
+"<br />"+
"网页正文部分上:"+window.screenTop
+"<br />"+
"网页正文部分左:"+window.screenLeft
+"<br />"+
"屏幕分辨率的高:"+window.screen.height
+"<br />"+
"屏幕分辨率的宽:"+window.screen.width
+"<br />"+
"屏幕可用工作区高度:"+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度:"+window.screen.availWidth
);
</script>
</div>
</body>
</html>


手机浏览器显示截图如下,从截图中看到已经完全适配


测试二

页面html代码如下,设定页面宽度3000px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=3000, user-scalable=no" />
<style>
 *{padding: 0;margin: 0;} 
</style>
</head>
<body>
<div id="container" style="width: 3000px;">
<div style="width: 1000px;height: 100px;background-color: yellow;float:left"></div>
<div style="width: 1000px;height: 100px;background-color: #00ff00;float:left"></div>
<div style="width: 1000px;height: 100px;background-color: gray;float:left"></div>
</div>
<div style="clear: both;">
<script>
document.write(
"屏幕分辨率为:"+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽:"+document.body.clientWidth
+"<br />"+
"网页可见区域高:"+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽):"+document.body.offsetWidth 
+"<br />"+
"网页可见区域高(包括边线的宽):"+document.body.offsetHeight 
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft
+"<br />"+
"网页正文部分上:"+window.screenTop
+"<br />"+
"网页正文部分左:"+window.screenLeft
+"<br />"+
"屏幕分辨率的高:"+window.screen.height
+"<br />"+
"屏幕分辨率的宽:"+window.screen.width
+"<br />"+
"屏幕可用工作区高度:"+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度:"+window.screen.availWidth
);
</script>
</div>
</body>
</html>

手机浏览器显示截图如下:


经过测试发现,页面设计只要确定一个宽度,并在这个宽度内设计内容,然后设定viewport中width和设计宽度相同,那么手机浏览器就能自动适配。


从截图中可以看到在小米4手机的浏览器中使用js获取到的屏幕宽高是360x640,这个和实际的1080p并不相符,具体为什么是这个值就要问小米的开发人员了。

在第一个测试中如果设定<meta name="viewport" content="width=720, initial-scale=0.5" />同样可以适配,这就可以知道浏览器默认的初始缩放就是 360/720=0.5。

也即是如果是720px的页面设定initial-scale=0.5完全适配,如果是480px的页面则设定initial-scale=360/480=0.75完全适配。当然这只是在小米4的手机上的值,其他手机上需要具体情况具体分析

建议的还是不设置initial-scale的值,让手机浏览器自动计算缩放值。


其他可能引起不适配的问题:

当页面设计的宽度高于手机屏幕宽度(分辨率)时,如果不设置user-scalable=no则界面不会适配。


后记: 在一些有输入框的页面,用户点击输入框页面会变大,这个时候如果设置user-scalable=no则页面就没法恢复,所以在这些页面建议设置maximum-scale=2.0


提交评论