移動端開發技巧

移動端動態生成rem的問題

提到移動端，大家第一個想到的就是移動端針對不同尺寸的手機尺寸的時候如何進行響應式佈局的問題、在最近看過多篇部落格之後總結出一個相對來說較優的解決方案：根據不同的實際圖尺寸動態生成html的font-size，然後其他的尺寸通過rem來寫。

<script>
	function resizeRoot() {
		var wFsize = document.documentElement.clientWidth / (750 / 100);
		document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
	}

	resizeRoot();
</script>
複製程式碼

由於我拿到的設計圖是iphone6，也就是750的尺寸，所以我上面公式帶入的是750，具體的數值還需要根據不同的設計圖尺寸進行修改。

同時如果在設計圖中某一個元素的尺寸為200px，那麼在程式碼中直接寫2rem即可。

1、meta型別

移動端meta小結

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<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" />

<!-- iOS 移動裝置新增主螢幕標題設定 -->
<meta name="apple-mobile-web-app-title" content="TM" >

<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--優先使用最新版本的IE和Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 


<!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">

<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC應用模式 -->
<meta name="browsermode" content="application">

<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 點選無高光 -->
<meta name="msapplication-tap-highlight" content="no">

<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileColor" content="#000"/>

<!-- Windows 8 磁貼圖示 --> 
<meta name="msapplication-TileImage" content="icon.png"/>
<!--百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之噁心。不過我們可以通過這個meta標籤來禁止它-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
複製程式碼

將佈局視口設定等於裝置畫素

<script>
    var scale = 1 / window.devicePixelRatio;
    document
    .querySelector('meta[name="viewport"]') //獲取 name為 viewport的 meta元素
    // 設定 content屬性
    .setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
</script>
複製程式碼

2、佈局類

固定底欄佈局

HTML程式碼：

<div class="div_class_Popup">
	<div class="all_class_Header"></div>
	<div class="all_class_Content"></div>
	<div class="all_class_Footer"></div>
</div>
複製程式碼

CSS程式碼:

.div_class_Popup{
  display: flex;
  min-height: 100vh;//設定最低高度
  flex-direction: column;//決定主軸的方向為豎
}

.all_class_Content {
  flex: 1;//中間內容撐開 保證底部欄永遠在底部
}
複製程式碼

3、控制元件類

移動端取消掉手機端webkit瀏覽器 點選按鈕或超連結之類的 預設灰色背景色

通過設定css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
複製程式碼

輸入框：去掉iOS上預設陰影

input,textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}
複製程式碼

上下拉動滾動條時卡頓、慢

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
複製程式碼

禁止複製、文字選中

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
複製程式碼

ios和Android下觸控元素出現半透明灰色遮罩

Element {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}
複製程式碼

某些安卓手機圓角失效

background-clip: padding-box;
複製程式碼

設定快取

手機頁面通常在第一次載入後會進行快取，然後每次重新整理會使用快取而不是去重新向伺服器傳送請求，如果不希望快取可以設定no-cache

<meta http-equiv="Cache-Control" content="no-cache" />
複製程式碼

開啟電話功能

<a href="tel:123456">123456</a>
複製程式碼

開啟簡訊功能

<a href="sms:123456">123456</a> 
複製程式碼

圖片：100%響應式顯示

清除浮動

.clearfix{
  display: inline-block
  &:after{
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
  }
}
複製程式碼

4、其他怪異樣式類

移動端Retina螢幕1px問題

戳這裡

@mixin border-1px($color){
  position: relative;
  &:after;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid $color;
  content: ' ';
}
複製程式碼

不同的dpr應用不同的圖片

@mixin bg-image($url){
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png");
  }
}


/**在不同的dpr下設定border 1px*/
@media (-webkit-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}
@media (-webkit-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
@media (-webkit-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
    }
  }
}
複製程式碼

5、文字類

多行文字省略顯示

display: -webkit-box;// 設定display，將物件作為彈性伸縮盒子模型顯示
-webkit-box-orient: vertical;//規定框的子元素應該被水平或垂直排列
-webkit-line-clamp: 3;// 限制在一個塊元素顯示的文字的行數 
overflow: hidden;//超出部分隱藏
text-overflow: ellipsis;//然後省略號補齊空位
text-overflow: -o-ellipsis-lastline;//在文字的最後一行加上省略號
複製程式碼

函式封裝

//文字超出XX行省略號
@mixin setOverflowEllipsis($rowsize){
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$rowsize};
    text-overflow: -o-ellip1sis-lastline;
    -webkit-box-orient: vertical;
}
複製程式碼

6、程式碼

CSS reset

/* hcysun  */
@charset "utf-8";
/* reset */
html{
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
    -webkit-touch-callout: none
    font-family: Helvetica;
}
body{font-size:12px;}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none; overflow:auto;}
/* end reset */
複製程式碼

戳這裡

戳這裡