移动APPmeta、Reset、适配、兼容处理

时间 2020-06-08

原文原文链接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="screen-orientation" content="portrait">
       <meta name="full-screen" content="yes">
       <meta name="x5-orientation" content="portrait">
       <meta http-equiv="Cache-Control" content="no-siteapp">
       <meta name="x5-fullscreen" content="true">
       <meta name="format-detection" content="telephone=no, email=no" />
       <meta name="description" content="">
       <meta name="keywords" content="">
       <title>移动端meta标签和默认样式设置</title>
       
       
       <script>
           /*
           touch事件的时候，手机自己是会有滚动的功能的你用到touch事件，就会触发手机上面的默认事件，页面就会出问题，因此阻止掉浏览器默认事件，
           */
           document.addEventListener('touchstart',function(ev){
               ev.preventDefault();//阻止浏览器的默认行为
           })
       </script>
       <script>
           var pixelRatio = 1/window.devicePixelRatio;
           document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+',user-scalable=no" />');
           var html = document.getElementsByTagName('html')[0];
           var pageWidth=html.getBoundingClientRect().width;
           html.style.fontSize=pageWidth/16+'px';


       </script>
       <style>
           body, h1, h2, h3, h4, h5, h6, p, dl, dd { margin: 0; }
           ul, ol { margin: 0; padding: 0; list-style: none; }
           img { border: none; vertical-align: top; }
           a { text-decoration: none; }


           body {
               font-family: helvetica;/*英文字体*/
           }
           body * {
               -webkit-text-size-adjust: 100%;/*禁止用户修改字体大小，部分横竖屏切换字体大小缩放*/
               -webkit-user-select: none;/*禁止选中文字，安卓部分机型没效果,弹出菜单js*/
           }
           a,
           input,
           button {
               -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*清除点击阴影*/
           }
           input,
           button {
               -webkit-appearance: none;/*清除ios按钮圆角*/
               border-radius: 0;
           }html

　　　　html{ios

　　　　width:100%;web

　　　　height:100%;浏览器

　　　　overflow:hidden;缓存

　　}服务器

body{微信

　　　　width:100%;app

　　　　height:100%;工具

　　　　overflow:auto;字体

　　}

============

html{ height: 100%; overflow: hidden;/*去掉页面默认滚动条*/ } body{ margin: 0; height: 动态计算的; overflow: hidden; position: relative; } .wrap{ height: 100%; overflow: auto; /*此时页面的滚动条是body的*/ } </style> </head> <body> <script> var h= document.documentElement.clientHeight; document.body.style.height=h+'px'; </script> <a href="tel:18569032656">请拨打电话：18569032656</a> <a href="mailto:yuanbo@yuanbo.com">请发送邮件：yuanbo@yuanbo.com</a> </body></html>