1.head部分 通用写法;网上也有,不过有的可有有的可无;原理是兼容IOS透明栏目等问题,再者就是viewport(关键)
<head> <meta charset="UTF-8"> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <!-- 添加到主屏后的标题(iOS 6 新增) --> <meta name="apple-mobile-web-app-title" content=""> <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 设置苹果工具栏颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 忽略页面中的数字识别为电话,忽略email识别 --> <meta name="format-detection" content="telphone=no, email=no"/> <!--下面三个是清除缓存 微信浏览器缓存严重又无刷新;这个方法调试的时候很方便--> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <title>web前端-头部写法</title> </head>
2.引入引用flexible.js;这是淘宝的兼容解决方案,最大到5.5寸;用的时候把viewport去掉,flexible.js会动态添加;
主要讲一下用法,网上的讲的太细却使很多网友没懂;flexible.js只有4K,作用是:
1.动态改写 <meta> 标签
2.给 <html> 元素添加 data-dpr 属性,并且动态改写 data-dpr 的值
3.给 <html> 元素添加 font-size 属性,并且动态改写 font-size 的值
接下来就可以用了,若你的图示640的 就设置1rem=64px 如果是750的就设置1rem=75px;比如320X240的banner,那么就换算成5remX3.75rem(640为例)
本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长
如若转载,请注明出处:https://www.htmlbk.com/web/2373.html
温馨提示:该文档最后一次修改时间为2023-09-02 16:44:44,请注意相关的内容是否还可用!