移动端代码片段mark

phoneCollector_1

/*
* 1. media query
* 2. meta标签
* 3. link标签
* 4. retina解决方案
* 5. 判断手机或平板
* 6. 关闭自动大写与自动修正
* 7. 被点击元素外观变化，可以通过样式来设定
* 8. 阻止旋转屏幕是自动调整字体大小
**/
1. media query
  @media only screen and (device-width: 768px) {
    /* For general iPad layouts */
  }
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
  }
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
  }

2. meta标签
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
  <!-- 隐藏状态栏 -->
  <meta name=”apple-mobile-web-app-status-bar-style” content=black” />
  <!-- 指定的iphone中safari顶端的状态条的样式 -->
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <!-- 告诉设备忽略将页面中的数字识别为电话号码 -->
  <meta content="telephone=no" name="format-detection" />
  <meta name="Author" contect="Mr.He"/ >

3. link标签
  <!-- 设置开始页面图片 -->
  <link rel=”apple-touch-startup-image” href=”startup.png” />
  <!-- 在设置书签的时候可以显示好看的图标 -->
  <link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/>
  <!-- 肖像模式样式 -->
  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
  <!-- 风景模式样式 -->
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
  
  <!-- 竖屏时使用的样式 -->
  <style media="all and (orientation:portrait)" type="text/css">
  #landscape { display: none; }
  </style>
  
  <!-- 横屏时使用的样式 -->
  <style media="all and (orientation:landscape)" type="text/css">
  #portrait { display: none; }
  </style>

4. retina解决方案
  @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
  only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
  only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
  only screen and (min-resolution: 240dpi), /* 标准 */
  only screen and (min-resolution: 2dppx) /* 标准 */
  {
  /* your code */
  }
  <img src="images/snarf@2x.jpg" width="300px" height="150px" />
  
5. 判断手机或平板
  var sUserAgent= navigator.userAgent.toLowerCase();
  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";  //UC极速模式
  
  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";
 
 /**
 * Android requires exceptions.
 *
 * @type boolean
 */
 deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0;

 /**
 * iOS requires exceptions.
 *
 * @type boolean
 */
 deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent);

 /**
 * iOS 4 requires an exception for select elements.
 *
 * @type boolean
 */
 deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);

 /**
 * iOS 6.0(+?) requires the target element to be manually derived
 *
 * @type boolean
 */
 deviceIsIOSWithBadTarget = deviceIsIOS && (/OS ([6-9]|\d{2})_\d/).test(navigator.userAgent);

6. 关闭自动大写与自动修正
  <input type="text" autocapitalize="off" autocorrect="off" />
  
7. 被点击元素外观变化，可以通过样式来设定
  -webkit-tap-highlight-color: red;

8. 阻止旋转屏幕是自动调整字体大小
  html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}