所有移动端PC端 按 ６４０ 进行排版
body, html { 100%; height: 100%; overflow: hidden; background-color: #515363; } body{ height: 100%; overflow: hidden; box-shadow: 0 0 160px 0 #5C99E7; background-color: #fff; position:relative; } .app { 640px; margin: 0 auto; box-sizing: border-box; overflow:hidden; } <body class="app"></div> <script type="text/javascript"> if(/Android (d+.d+)/.test(navigator.userAgent)){ var version = parseFloat(RegExp.$1); if(version>2.3){ var phoneScale = parseInt(window.screen.width)/640; document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } }else{ document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } //微信去掉下方刷新栏 if(navigator.userAgent.indexOf('MicroMessenger') >= 0){ document.addEventListener('WeixinJSBridgeReady', function() { //WeixinJSBridge.call('hideToolbar'); }); } </script>
************移动pc端分别加载不同的网页方法***************
<script> function isMobile(){try{var $=window.location.hash;if(!$.match("fromapp"))if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|Mobile)/i)))return true}catch(_){}return false} !!isMobile()&&(document.location.href="./mobile/"); if(!-[1,]){document.location.href="./html/"}; </script>
1、<script>
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
if (!IsPC()) {
<%--respond样式--%>
$("head").append('<link href="/Css/media.css" rel="stylesheet" />');
}
</script>
2、meta name="viewport" 的设置方法
<script type="text/javascript">
if(/Android (d+.d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>