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>

 

 

参考推荐：

一天完成把PC网站改为自适应

PC端网页自适应手机屏幕大小

BootStrap：一天完成把PC网站改为自适应

PC网站自动适配手机网页的方法技巧

CSS 自适应多屏大小的 @media 用法详解

WordPress 视频嵌入iframe自适应手机的初步解决方案