移动端1px边框线在iPhone6,iPhone7中变粗的处理方法
来源:互联网 发布:运维大数据分析 编辑:程序博客网 时间:2024/06/07 18:48
开发过移动端页面的朋友都知道,在代码头部应该加入这样一句话:
<meta name="viewport" content = "width=device-width,initial-scale = 1,maximum-scale = 1,minimum-scale = 1,user-scaleble = no">
注:
1.initial-scale:设置网页初始时候的大小
2.maximum-scale:设置网页最大放大多少
3.minimum-scale:设置网页最小缩小多少
4.user-scaleble:是否允许用户放大或缩小网页,no为不允许
然而,在开发过程中,1px的底部边框在安卓上显示正常,在iPhone6中看起来比1px粗,这是因为手机分辨率比较大,导致一个像素由几个点组成,那么,我们就需要动态生成meta标签插入头部来处理这个问题。
<script> var metaEl = document.createElement('meta'); var scale = isRetina ? 0.5 : 1 ; metaEl.setAttribute('name','viewport'); metaEl.setAttribute('content','initial-scale='+ scale +',maximum-scale='+ scale +',minimum-scale = '+ scale +',user-scaleble = no'); if(document.documentElement.firstElementChild) { document.documentElement.firstElementChild.appendChild(metaEl); } else { var wrap = document.createElement('div'); wrap.appendTo('metaEl'); document.write(wrap.innerHTML); } </script>
然而,iPhone6和iPhone7又不一样,那我们就可以根据缩放比例将scale变为0.3或0.5,。
如上是手机淘宝的处理方式,朋友们若有其他的方式,欢迎互动交流。
每天进步一点点!!!
阅读全文
0 0
- 移动端1px边框线在iPhone6,iPhone7中变粗的处理方法
- 移动端边框1px处理
- 移动端1px边框的解决方案
- 移动端1px边框的实现
- 移动端1px边框的实现
- 移动端实现1px的边框
- 移动端 1px边框
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
- 移动端Retina屏实现1px的边框
- 面试题:移动端1px边框的样式
- CSS/移动端添加真正1PX边框线
- 移动端1px边框实现
- 移动端1px边框解决方案
- 移动端1px边框实现
- 移动端1px边框 -- 伪元素
- 移动端1px像素边框
- 移动端实现1px边框
- 7种方法解决移动端Retina屏幕1px边框问题
- AI的胜利,人类的荣耀
- mysql 数据语句
- core核心模块—基本绘图
- 121. Best Time to Buy and Sell Stock
- C++钱能DataTypes
- 移动端1px边框线在iPhone6,iPhone7中变粗的处理方法
- Make Menuconfig简介
- PHPCMS v9.2.4文件上传漏洞分析【附Exploit】
- thinkphp 模板格式化输出datetime类型数据
- 小规则让你写出漂亮又高效的程序(仅供自己日常反省用)
- Java还要再学一遍基础(十)LinkedHashMap原理
- Hadoop Streaming 输出文件分割
- 【菜鸟玩Linux开发】在Linux中使用VS Code编译调试C++项目
- log4j入门实例