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.em與rem：

3.栅格布局：

四、文本的處理

1、關閉iOS鍵盤首字母自動大寫<input type="text" autocapitalize="off" />

2、//單行文本溢出

.xx{

　　overflow:hidden;

　　white-space:nowrap;

　　text-overflow:ellipsis;

}

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、//使用流體圖檔

img{

　　width:100%;

　　height:auto;

　　width:auto\9;

}

2、audio元素和video元素在ios和andriod中無法自動播放

　　應對方案：觸屏即播

$('html').one('touchstart',function(){

　　audio.play()

})

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

　　通常當你在手機或者pad上長按圖像 img ，會彈出選項 存儲圖像 或者 拷貝圖像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：

img {

　　-webkit-touch-callout: none;

}

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

六、陰影的處理

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

　　在iOS上，輸入框預設有内部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

input,textarea {

　　border: 0;

　　-webkit-appearance: none;

}

七、字型的處理

對于網站字型設定

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;