<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes"><!--刪除默認的蘋果工具欄和菜單欄-->
<meta name="screen-orientation" content="portrait"><!--qq設置全屏-->
<meta name="full-screen" content="yes"><!--uc全屏 安卓和 蘋果原生瀏覽器沒法強制豎屏和全屏,需js支持 !m=no-->
<meta name="x5-orientation" content="portrait"><!--x5內核qq,微信 強制橫屏或豎屏顯示-->
<meta http-equiv="Cache-Control" content="no-siteapp"><!--控制網頁的緩存每次都會訪問服務器-->
<meta name="x5-fullscreen" content="true"><!--qq設置全屏 !m=false-->
<meta name="format-detection" content="telephone=no, email=no" /><!--禁止識別電話號碼和郵箱號碼-->
<meta name="description" content="">
<meta name="keywords" content="">
<title>移動端meta標籤和默認樣式設置</title>
<!--<script>
//注意:所適配的設備寬度不能超過目標寬度也就是設計稿寬度哦
(function(){
var w=window.screen.width; //獲取屏幕寬度
var targetW=720; //設置每一個頁面的縮放比
var scale=w/targetW;
//動態添加meta標籤
var meta=document.createElement("meta");
meta.name="viewport";
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no"
//console.log(scale)
document.head.appendChild(meta);
})()
<script>-->
<!--<script>
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
function resize() {
}
resize();
return resize;
})(), false);
</script>-->
<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;字體
}
============
<!--ios下 bodyovflow:auto失效 200%仍是會出現橫向滾動條,解決辦法再包一層div 相對了增長的div進行定位--> 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>