您现在的位置是:首页 > 设计心得设计心得

判断是否是手机访问

2021-04-06 09:16:56【设计心得】人已围观

简介手机站自动判断
<meta http-equiv="mobile-agent" content="format=xhtml;url=m/index.htm">
<script type="text/javascript">if(window.location.toString().indexOf(&#39

手机站自动判断
<meta http-equiv="mobile-agent" content="format=xhtml;url=m/index.htm">
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="m/index.htm"/*tpa=http://www.tjzizhi.com/m*/;}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>

<script type="text/javascript">
var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++){
    if (browser.indexOf(mobileAgent[i])!=-1){
        isMobile = true;
        //alert(mobileAgent[i]);
        location.href = '/m/';
        break;
    }
}
</script>


手机站点兼容性问题
<meta name="apple-mobile-web-app-capable" content="yes"/><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telephone=no, email=no"/><!--忽略页面中的数字识别为电话,忽略email识别 -->
<meta name="renderer" content="webkit"><!-- 启用360浏览器的极速模式(webkit) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 避免IE使用兼容模式 -->
<meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 -->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="msapplication-tap-highlight" content="no">  <!-- windows phone 点击无高光 --> 

手机样式自适应
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<style>
@media screen and (max-width:1000px ) {
    html{font-size: 20px;}  /*手机*/
}
@media screen and (min-width:1000px ) {
    html{font-size: 50px;}  /*pc*/
}
</style>


判断手机css
<script type="text/javascript">
try {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
document.write('<style>.bofang_box{width:100%;height:280px;}</style>');
} else {
document.write('<style>.bofang_box{width:100%;height:620px;}</style>');


}
} catch (e) { }
</script>

Tags:

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    您的昵称: