谷歌模拟器和手机真机适配的坑

在这次的项目中,采用了rem作为单位,之所以采用rem是因为rem相对于根元素的字体大小的单位(可以联想一下em)。一旦根节点html定义的font-size变化,那么整个网页中运用到rem的也会变化。根节点html的font-size是根据屏幕大小的变化来变化的。JS监听浏览器字体大小,如图1-1。

图1-1

然而,谷歌模拟器iPhone 5(并不只是iPhone5,这里只是举个栗子)上却出现页面不适配的问题,如图1-2。但是在手机真机iPhone5上并没有出现出现网页变形的问题,如图1-3。

图1-2

图1-3

为了测试,我分别在火狐浏览器和360浏览器上打开这个页面,发现和手机真机打开的页面一样,没有变形。由此推测,是谷歌浏览器的问题。然后,我反复查看代码,发现在谷歌模拟器上iphone6 plus(分辨率为414)的页面的根字体大小为10.35px,而谷歌浏览器支持的最小字体为12px,显然,这是设置根字体大小设置的太小的问题。那么现在只要把根字体大小设置的大于或者等于12px就可以了。如图1-4。

图1-4

因为之前计算根字体大小是将设备的宽度除以40,这样得到的根字体大小在414屏幕的时候就小于12px,现在将除以40改成除以20,这样在最小手机屏幕320的时候根字体大小也大于12px(即16px)。现在进行页面调整,之前除以40的时候,css里面的px转换成rem要除以16,现在转换就要除以32。调整后的页面如下图1-5。

图1-5

谷歌浏览器支持的最小字体为12px,要注意。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,263评论 1 92
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,810评论 5 80
  • 作者:HelKyle链接:http://www.w3cplus.com/css/when-to-use-em-vs...
    红叶丶秋鸣阅读 3,506评论 0 3
  • ·##概念介绍:1.px(pixel,像素):是一个虚拟长度单位,是计算机系统的数字化长度单位,如果px要换算成物...
    小时候很帅的龙少阅读 2,219评论 0 6
  • 有的炙热的燃烧 有的暗淡如死去 一晃神 你成了最挺拔的人 是赴刑场也是凝深渊 是破风浪也是踏海洋 是撕了臆想也是蚀...
    温柔如初阅读 499评论 0 0

友情链接更多精彩内容