Open DestinyHunter opened 5 years ago
做移动端的页面大多是用百分比(%)来做,每次做这种页面都相当的痛苦,特别是机型越来越多,分辨率的大小也越多,要兼容的地方比PC上复杂多了,想把页面弄的差不多,要写N多的媒体查询,这个工作量是可想而知的。
虽说移动端的精髓是:百分比(%)布局+rem控制字体大小+媒体查询(Media query)微调
但如果一下要做很多页面,所花的时间都无法预计,费时费力,兼容又不是很好。
下面提供一种方法:是利用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里面嵌入页面,可能会出现viewport失效的情况,这个问题困扰了我好久,搞了好几天,这是个大坑啊,度娘一条一条的搜索记录翻到了十多页,甚至去翻歪果仁的提问,终于找到了解决办法,这办法一开始还不生效,就在我打算重写页面的时候,安卓那边告诉我可以了。。。
需要在安卓那边调用页面的时候,设置下webView,这个东西是什么我一两句说不清楚,自己去查资料吧。
WebSettings settings = webView.getSettings(); settings.setLoadWithOverviewMode(true); settings.setUseWideViewPort(true);
参考资料:
Android Webview - Webpage should fit the device screen
IOS下不生效问题: 过了好几天,IOS那边告诉我页面放大了,我就奇怪了,viewport不是苹果最先开始弄的吗,怎么反而不支持了。我试了下相关的属性,不论我怎么加viewport,就是也不生效,想到既然安卓那边有相关的控制,IOS也应该有,然后搜索了下资料,还真有EnableViewportScale这个东西,让IOS那边看了下这个东西,然后告诉我可以了,还真是这东西搞的鬼。
代码如下:
在phonegap的config.xml中增加一行配置:
<preference name="EnableViewportScale" value="true"/>
文字连续大于97个字缩放失效
body{-webkit-text-size-adjust: 100% !important;}
做移动端的页面大多是用百分比(%)来做,每次做这种页面都相当的痛苦,特别是机型越来越多,分辨率的大小也越多,要兼容的地方比PC上复杂多了,想把页面弄的差不多,要写N多的媒体查询,这个工作量是可想而知的。
虽说移动端的精髓是:百分比(%)布局+rem控制字体大小+媒体查询(Media query)微调
但如果一下要做很多页面,所花的时间都无法预计,费时费力,兼容又不是很好。
下面提供一种方法:是利用js来控制viewport的缩放比
Android下不生效问题: 注意:在Android APP里面嵌入页面,可能会出现viewport失效的情况,这个问题困扰了我好久,搞了好几天,这是个大坑啊,度娘一条一条的搜索记录翻到了十多页,甚至去翻歪果仁的提问,终于找到了解决办法,这办法一开始还不生效,就在我打算重写页面的时候,安卓那边告诉我可以了。。。
需要在安卓那边调用页面的时候,设置下webView,这个东西是什么我一两句说不清楚,自己去查资料吧。
参考资料:
Android Webview - Webpage should fit the device screen
IOS下不生效问题: 过了好几天,IOS那边告诉我页面放大了,我就奇怪了,viewport不是苹果最先开始弄的吗,怎么反而不支持了。我试了下相关的属性,不论我怎么加viewport,就是也不生效,想到既然安卓那边有相关的控制,IOS也应该有,然后搜索了下资料,还真有EnableViewportScale这个东西,让IOS那边看了下这个东西,然后告诉我可以了,还真是这东西搞的鬼。
代码如下:
在phonegap的config.xml中增加一行配置: