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

最新推荐文章于 2021-08-03 21:16:04 发布

weixin_34163741

最新推荐文章于 2021-08-03 21:16:04 发布

阅读量178

点赞数

文章标签：移动开发 javascript ViewUI

所有移动端PC端　按　６４０　进行排版

body, html {
width: 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 {
width: 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>

weixin_34163741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
判断pc端还是移动，并给移动加上其它的样式文件方法

所有移动端PC端　按　６４０　进行排版body, html {width: 100%;height: 100%;overflow: hidden;background-color: #515363;}body{height: 100%;overflow: hidden;box-shadow: 0 0 160px 0 #5C99E...
复制链接

扫一扫