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自适应手机的初步解决方案