判断pc端还是移动,并给移动加上其它的样式文件方法

 

所有移动端PC端 按 640 进行排版

body, html {
width: %;
height: %;
overflow: hidden;
background-color: #;
}
body{
height: %;
overflow: hidden;
box-shadow: 160px #5C99E7;
background-color: #fff;
position:relative;
}
.app {
width: 640px;
margin: 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.$);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/;
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') >= ){
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(!-[,]){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>

  

上一篇:201521123042《Java程序设计》 第7周学习总结


下一篇:在javaEE下学习web(在eclipse中开发动态的WEB工程,servlet的环境搭建,及servlet的一些方法)