JS检测移动端自适应屏幕大小
PC页面常常在手机上无法正常显示,或页面内容超出屏幕无法看到,或页面排版乱七八糟。
今天,米扑博客整理了PC端网页自适应手机屏幕的代码,可以做到自适应手机屏幕宽度。
在网页的<head>中增加一个meta标签,可以让网页的宽度自动适应手机屏幕的宽度。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable="yes">
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
如果想要一打开网页,则自动以原始比例显示,并且不允许用户拖动和放大缩小的话,则是:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable="no">
这样就可以了,就能将网页的宽度放到手机上,让其自适应了。
判断是否是移动端
方式1: 检测系统平台
<script type="text/javascript"> //平台、设备和操作系统 var system = { win: false, mac: false, xll: false, ipad:false }; var p = navigator.platform; // 检测平台 system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; //跳转语句,如果是手机访问就自动跳转到" "里的页面 if (system.win || system.mac || system.xll || system.ipad) { alert("PC Page"); } else { window.location.href = " "; alert("Mobile Device"); } </script>
方式2: 检测 User-Agent
<script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); // 检测 userAgent var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; document.writeln("您的浏览设备为:"); if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { alert("Mobile Device"); } else { alert("PC Page"); } } browserRedirect(); </script>
方式3: 腾讯网适配代码
<script type="text/javascript"> //腾讯网的适配代码 var browser = { versions : function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident : u.indexOf('Trident') > -1, //IE内核 presto : u.indexOf('Presto') > -1, //opera内核 webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile : !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp : u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部 google:u.indexOf('Chrome')>-1 }; }(), language : (navigator.browserLanguage || navigator.language).toLowerCase() } document.writeln("语言版本: "+browser.language); document.writeln(" 是否为移动终端: "+browser.versions.mobile); </script>
参考推荐:
WordPress 视频嵌入iframe自适应手机的初步解决方案
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2019-02-08 00:55:06
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!
转载注明: JS检测移动端自适应屏幕大小 (米扑博客)