H5页面适配,为什么安卓会屏幕越大,页面越小啊

使用的是flexible.js,设计稿是750px,在6和7p上显示正常,在安卓上就发现页面变得非常小是怎么回事啊

<head>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" href="index.css">
  </head>

ide这边插件设置的1rem=75px,应该也没问题啊,求大神救救孩子

阅读 1.8k
2 个回答

仅就目前代码而言,很明显meta标签里没写viewport

刚测试了一下 为什么我用的和你一摸一样的

http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

但是并没有生成

viewport content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"

测试了一下发现在ipad上等尺寸稍大的情况下,这个似乎有点问题(之前记得最大宽度是750,现在好像没这个限制了)。

你可以试下这个

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document)

更新:刚看到官方文档已建议放弃你所使用的这个方案。取而代之的是https://github.com/amfe/lib-f...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题