天天看點
傳回

web移動端開發技巧與注意事項彙總 

二、meta的使用

1、

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

強制讓文檔的寬度與裝置的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許使用者點選螢幕放大浏覽

2、

winphone

系統

a

、

input

标簽被點選時産生的半透明灰色背景怎麼去掉： 

<meta name="msapplication-tap-highlight" content="no">

3、忽略頁面的數字為電話，忽略email識别 

<meta name="format-detection" content="telephone=no, email=no"/>

二、針對适配等比縮放的方法:

@media only screen and (min-width: 1024px){
　　body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
　　body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
　　body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
　　body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
　　body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
　　body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
　　body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
　　body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
　　body{zoom:1.125;}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

或如：

@media all and (orientation : landscape) { 
　　h2{color:red;}/*橫屏時字型紅色*/
} 

@media all and (orientation : portrait){ 
　　h2{color:green;}/*豎屏時字型綠色*/
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

三、布局 

1.布局使用百分比： 

　　不同的手機有着不同的分辨率，這時再用我們pc端布局常用的px就不合适了。使用百分比布局要時時刻刻清楚其父元素，因為子元素的百分比高度是根據父元素的高度來确定的，當父元素的高度為不确定值時，或者說父元素的高度未定義時，子元素的高度百分比将沒有用（沒有參照物）。是以隻有設定了父元素的高度，子元素的高度百分比才會有用。

2.em與rem： 

　　

em

是根據相對機關，不是固定的，他會繼承父級元素的字型大小，若沒有父級則em的相對基準點為浏覽器的字型大小，浏覽器的字型預設為16px，是以若無父級元素，相對于浏覽器大小：

Xem=X*16px;

rem

是css3新增屬性，是完全相對于HTML根元素大小設定的，預設為10px，是以無論父級字型大小，

1rem=10px

。

3.栅格布局： 

　　

box-sizing:border-box;

可以改變盒子模型的計算方式友善你設定寬進行自适應流式布局。

4、wap頁面有

img

标簽，記得加上

display：block；

屬性來解決

img

的邊緣空白間隙的1px像素。如果圖檔要适應不同的手機要設定

width:100%;

而且不能添加高度。

5、有關

Flexbox

彈性盒子布局一些屬性 

　　1、不定寬高的水準垂直居中 

　　 

　　.xxx{ 

　　　　position:absolute; 

　　　　top:50%; 

　　　　left:50%; 

　　　　z-index:3; 

　　　　-webkit-transform:translate(-50%，-50%)； 

　　　　border-radius:6px; 

　　　　background:#fff; 

　　　} 

　　　　 

2、[

flexbox

版]不定寬高的水準垂直居中 

　　.xx{ 

　　　　justify-content:center;//子元素水準居中， 

　　　　align-items:center;//子元素垂直居中; 

　　　　display:-webkit-flex; 

　　}

四、文本的處理 

1、關閉iOS鍵盤首字母自動大寫

<input type="text" autocapitalize="off" />

2、//單行文本溢出

.xx{
　　overflow:hidden;
　　white-space:nowrap;
　　text-overflow:ellipsis;
}
  • 1
  • 2
  • 3
  • 4
  • 5

3、//多行文本溢出

.xx{
　　display:-webkit-box !importmort;
　　overflow:hidden;
　　text-overflow:ellipsis;
　　word-break:break-all;
　　-webkit-box-orient:vertical;
　　-webkit-line-clamp:2;(數字2表示隐藏兩行)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

4、

html {
　-webkit-text-size-adjust: 100%;
}
  • 1
  • 2
  • 3

五、圖檔、媒體的處理 

1、//使用流體圖檔

img{
　　width:100%;
　　height:auto;
　　width:auto\9;
}
  • 1
  • 2
  • 3
  • 4
  • 5

2、

audio

元素和

video

元素在

ios

和

andriod

中無法自動播放 

　　應對方案：觸屏即播

$('html').one('touchstart',function(){
　　audio.play()
})
  • 1
  • 2
  • 3

3、如何禁止儲存或拷貝圖像 

　　通常當你在手機或者

pad

上長按圖像 

img

 ，會彈出選項 存儲圖像 或者 拷貝圖像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：

img {
　　-webkit-touch-callout: none;
}
  • 1
  • 2
  • 3

　　PS：需要注意的是，該方法隻在 iOS 上有效。

六、陰影的處理 

　　1、 移動端如何清除輸入框内陰影 

　　　　在iOS上，輸入框預設有内部陰影，但無法使用 

box-shadow

 來清除，如果不需要陰影，可以這樣關閉：

input,textarea {
　　border: 0;
　　-webkit-appearance: none;
}
  • 1
  • 2
  • 3
  • 4

七、字型的處理 

　　對于網站字型設定 

　　1、移動端項目： 

　　

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

　　2、移動和pc端項目： 

　　

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

　　3、字型大小盡量使用

pt

或者

em

，

rem

，代替

px

。

　　4、設定

input

裡面

placeholder

字型的大小

::-webkit-input-placeholder{ font-size:10pt;}

　　5、解決字型在移動端比例縮小後出現鋸齒的問題：

-webkit-font-smoothing: antialiased;

八、圓角設定

　　放一個圖檔或者一個按鈕，設定圓角會比較美觀，設定圓角的值可以用百分比，也可以用em等機關。　　　

element{
　　border: 1px solid #ccc;
　　-moz-border-radius: 百分比;
　　-webkit-border-radius: 百分比;
　　border-radius: 百分比;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

九、邊距凹陷

1、像素邊框（例子:移動端清單的下邊框）　

.list-iteam:after{
　　position: absolute;
　　left: 0px;
　　right: 0px;
　　content: '';
　　height: 1px;
　　transform: scaleY(0.5);
　　-moz-transform: scaleY(0.5);
　　-webkit-transform:scaleY(0.5);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2、與在pc端開發一樣，開發過程中需要的一個很需要注意的問題的邊距塌陷，典型的問題是

margin-top

的嵌套，對子元素設定

margin-top

值，子元素相對于父元素的位置沒有變，而父元素跟着子元素一起向下移動響應的距離。解決方案：

(1) 給父元素

div1

設定一個

padding

值

.div1{
　　height: 500px;
　　width: 100%;
　　background: #ccc;
　　padding-top: 1px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

(2) 給父元素

div1

設定一個

overflow：hidden；

在不加

overflow:Hidden;

的時候，

margin-top:

這個屬性是認不到邊的，也就是失效。但是ie浏覽器解決了這個問題，火狐、谷歌之類的就會出現失效，是以這是個标準問題，也是個相容問題。

.div1{
　　height: 500px;
　　width: 100%;
　　background: #ccc;
　　overflow: hidden;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

十、禁止内容 

1、//禁止文本縮放

html {
    -webkit-text-size-adjust: 100%;
}
  • 1
  • 2
  • 3

2、移動端禁止選中内容 

如果你不想使用者可以選中頁面中的内容，那麼你可以在

css

中禁掉：　

.user-select-none {
　　-webkit-user-select: none;
　　-moz-user-select: none;
　　-ms-user-select: none;
}
  • 1
  • 2
  • 3
  • 4
  • 5

　　相容

IE6-9

的寫法：

onselectstart="return false;" unselectable="on"

十一、滾動效果

十二、快速回彈 

　　快速回彈滾動

.xxx {
　　　overflow: auto;
　　　-webkit-overflow-scrolling: touch;
　}
  • 1
  • 2
  • 3
  • 4

　　PS：

iScroll

用過之後感覺不是很好，有一些詭異的bug，這裡推薦另外一個 

iDangero Swiper

，這個插件內建了滑屏滾動的強大功能（支援3D），而且還有回彈滾動的内置滾動條，官方位址： 

　　http://www.idangero.us/sliders/swiper/index.php

十三、白色背景顔色搭配

十四、常用的移動端開發架構以及工具 

架構 

1. 移動端基礎架構 

　　

zepto.js

 文法與jquery幾乎一樣，會jquery基本會zepto~ 

　　

iscroll.js

 解決頁面不支援彈性滾動，不支援fixed引起的問題~ 實作下拉重新整理，滑屏，縮放等功能~ 

　　

underscore.js

 該庫提供了一整套函數式程式設計的實用功能，但是沒有擴充任何JavaScript内置對象。 

　　

fastclick

 加快移動端點選響應時間 

　　

animate.css

 CSS3動畫效果庫 

　　

Normalize.css Normalize.css

是一種現代的、CSS reset為HTML5準備的優質替代方案 

2. 滑屏架構 

　　适合上下滑屏、左右滑屏等滑屏切換頁面的效果 

　　

slip.js

　　

iSlider.js

　　

fullpage.js

　　

swiper

3.瀑布流架構 

　　

masonry

工具推薦 

　　

caniuse

 各浏覽器支援html5屬性查詢 

　　

paletton

 調色搭配

十五、動畫的處理 

開啟硬體加速 

解決頁面閃白 

保證動畫流暢

.css {
　　-webkit-transform: translate3d(0, 0, 0);
　　-moz-transform: translate3d(0, 0, 0);
　　-ms-transform: translate3d(0, 0, 0);
　　transform: translate3d(0, 0, 0);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

設計高性能

CSS3

動畫的幾個要素 

盡可能地使用合成屬性

transform

和

opacity

來設計

CSS3

動畫， 

不使用

position

的

left

和

top

來定位 

利用

translate3D

開啟

GPU

加速

十六、消除閃爍 

　　 消除

transition

閃屏

.css{
　　　-webkit-transform-style: preserve-3d;
　　　-webkit-backface-visibility: hidden;
}
  • 1
  • 2
  • 3
  • 4

十七、移動端取消

touch

高亮效果 

　　在做移動端頁面時，會發現所有

a

标簽在觸發點選時或者所有設定了僞類 

:active

 的元素，預設都會在激活狀态時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來禁止：

.xxx {
　　-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
移動端 web移動端
上一篇: DBCP資料庫連接配接失效的解決方法(Io 異常：Connection reset)
下一篇: bsd 運作Linux軟體,BSD作業系統 FreeBSD

繼續閱讀