移动端页面适配的另类方法
Author: Vic.Wang 2015/08/31
做移动端的页面大多是用百分比(%)来做,每次做这种页面都相当的痛苦,特别是机型越来越多,分辨率的大小也越多,要兼容的地方比PC上复杂多了,想把页面弄的差不多,要写N多的媒体查询,这个工作量是可想而知的。
虽说移动端的精髓是:
但如果一下要做很多页面,所花的时间都无法预计,费时费力,兼容又不是很好。
下面提供一种方法:是利用js来控制viewport的缩放比
if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { var version = parseFloat(RegExp.$1); if(version>2.3){ var phoneScale = parseInt(window.screen.width) / 750; document.write("<meta name='viewport' content='width=750, minimum-scale=" + phoneScale + ", maximum-scale = "+ phoneScale + ", target-densitydpi=device-dpi'>"); } else { document.write("<meta name='viewport' content='width=750, target-densitydpi=device-dpi'>"); } } else { document.write("<meta name='viewport' content='width=750, user-scalable=no, target-densitydpi=device-dpi'>"); }
Android下不生效问题:
注意:在Android APP里面嵌入页面,可能会出现
需要在安卓那边调用页面的时候,设置下
WebSettings settings = webView.getSettings(); settings.setLoadWithOverviewMode(true); settings.setUseWideViewPort(true);
参考资料:
Android Webview - Webpage should fit the device screen
IOS下不生效问题:
过了好几天,IOS那边告诉我页面放大了,我就奇怪了,
代码如下:
在phonegap的config.xml中增加一行配置:
<preference name="EnableViewportScale" value="true"/>
参考资料:
本文地址:http://blog.mingsixue.com/mobile/mobile-js-adaptive.html
文章若需转载,请附上原文链接,谢谢配合。^_^