移动端常用meta及问题

来源：互联网发布：win7网络克隆教程编辑：程序博客网时间：2024/06/05 07:07
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><!-- viewport<meta name="viewport" content="width=640"> content="width=number" 有些android存在兼容user-scalable=0 禁止缩放 iOS10+已经不在支持initial-scalable android还是支持minimun-scale:最小缩放比例 与初始缩放比例相同设计稿最少750--><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除默认的苹果工具栏和菜单栏 --><meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 控制状态栏显示样式 --><Meta http-equiv="Pragma" Content="No-cach"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="Cache-Control" content="no-cache"><!-- viewport:可视区窗口如果不设置viewport,一般默认可视区宽度为980width 可视区宽度（number||device-width） --> <!-- 禁止识别电话号码和邮箱号码 --> <meta name="format-detection" content="telephone=no,email=no"><!-- QQ 浏览器x5内核定制标签说明 --><!-- portrait 竖屏 x5-orientation qq浏览器比如内置的微信--><meta name="x5-orientation" content="portrait|landscape"><!-- 设置全屏 --><meta name="x5-fullscreen" content="true" /><!-- 设置屏幕模式 --><meta name="x5-page-mode" content="app" /><!-- UC 浏览器的部分私有Meta 属性 --><!-- 设置屏幕方向为横屏还是竖屏 --><meta name="screen-orientation" content="portrait|landscape"><!-- 设置是否全屏，yes表示强制浏览器全屏 --><meta name="full-screen" content="yes"><!-- 缩放不出滚动条 --><meta name="viewport" content="uc-fitscreen=no|yes"/><!-- 设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。 -->排版<meta name="layoutmode" content="fitscreen|standard" /><!-- fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。 --><!-- 夜间模式 --><meta name="nightmode" content="enable|disable"/><!-- nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。 --><!-- 强制图片显示 --><meta name="imagemode" content="force"/><!-- UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个 --> <title>hello</title></head><style>*{margin: 0;padding: 0;}.div{width: 100px;height: 100px;background-color: #f00;}/*清除点击阴影*/a,input,button{-webkit-tap-highlight-color:rgba(255,255,255,0);}/*清除按钮默认样式*/input,button{webkit-appearance:none;border-radius:0;}body{font-family:Helvetica;}body *{/*禁止字体缩放*/-webkit-webkit-text-size-adjust: 100%;/*选中文字样式*/-webkit-user-select:none;}</style><body><p测试</p><div class="div">1</div><!-- 拨打电话 --><a href="tel:1383283xxxx">1383283xxxx</a><!-- 发送邮件 --><a href="mailto:xx@qq.com">xx@qq.com</a><!-- 移动端常见问题 -->一:Font Boosting :在一段文字中我们没有给它设置高度的时候，在webkit内核下，文字大小被浏览器放大解决方法： 1:设置高度2:设置最大高度给元素单独设置width或height或max-height即可禁用Text Autosizer二:Fixed三：viewport布局<script>(function(){var w = window.screen.width;var targetW = 320;var scale = w / targetW;var meta = document.createElement("meta");meta.name = "viewport";meta.content = "user-scalable=no,initial-scale="+scale+".minimun-scale="+scale+",maximum-scale="+scale+"";document.head.appendChild(meta);})()</script><script>// alert(window.devicePixelRatio);</script></body></html>
0 0