移動(dòng)端如何定義字體font-family

中文字體使用系統(tǒng)默認(rèn)即可，英文用Helvetica

body{font-family:Helvetica;}/* 移動(dòng)端定義字體的代碼 */

移動(dòng)端字體單位font-size選擇px還是rem

第一種方式

對(duì)于只需要適配少部分手機(jī)設(shè)備，且分辨率對(duì)頁(yè)面影響不大的，使用px即可 對(duì)于需要適配各種移動(dòng)設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備 rem配置參考：

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

第二種方式

字體設(shè)計(jì)的目的是用來(lái)閱讀而不是布局，所有在任何設(shè)備上應(yīng)該是一致的，使用px對(duì)參與布局的元素，使用rem或百分比，達(dá)到適配各種移動(dòng)端的目的。個(gè)人傾向于這種方式。

* 默認(rèn)iphone4、iphone5的320px分辨率 */
html{font-size:32px}
/* iphone6的375分辨率 */
@media screen and (min-device-width:375px){html{font-size:37.5px}}
/* iphone6 plus的414px分辨率及平板 */
@media screen and (min-device-width:414px){html{font-size:41.4px}}

移動(dòng)端touch事件

當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件

• touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指
• touchmove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另?yè)面，會(huì)調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁(yè)面滾動(dòng)
• touchend——當(dāng)手指離開(kāi)屏幕時(shí)觸發(fā)
• touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過(guò)程中突然頁(yè)面alert()一個(gè)提示框，此時(shí)會(huì)觸發(fā)該事件，這個(gè)事件比較少用

TouchEvent:

• touches：屏幕上所有手指的信息
• targetTouches：手指在目標(biāo)區(qū)域的手指信息
• changedTouches：最近一次觸發(fā)該事件的手指信息
• touchend時(shí)，touches與targetTouches信息會(huì)被刪除，changedTouches保存的最后一次的信息，最好用于計(jì)算手指信息

參數(shù)信息

• clientX、clientY在顯示區(qū)的坐標(biāo)
• target：當(dāng)前元素

一個(gè)完整的touch事件的寫(xiě)法

var startX,  startY, endX, endY;
$(element).on('touchstart', touchStart).on('touchmove', touchMove).on('touchend', touchEnd);
function touchStart(event){
    event.preventDefault;
    if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    startX = touch.pageX;
    startY = touch.pageY;
    };
}
function touchMove(event){
    event.preventDefault;
    if (event.targetTouches.length == 1) {
        var touch = event.targetTouches[0];
        endX = touch.pageX;
        endY = touch.pageY;
    };
}
function touchEnd(event){
    event.preventDefault;
    var $obj = $('#obj');
    if (startX - endX > 20 && Math.abs(startY - endY) < 80) {
        $obj.css({left:'-80px'});
    }
}

以上寫(xiě)法可以滿足某些情況 ,但是也帶來(lái)一個(gè)后果，就是系統(tǒng)默認(rèn)的滑動(dòng)失靈了，這在大部分的情況下是不能接受的。所以筆者曾嘗試把阻止系統(tǒng)默認(rèn)事件的event.preventDefault;刪除，這樣在iphone下完美兼容，但是在安卓下卻有個(gè)惱人的bug，touchend事件不能觸發(fā)了！經(jīng)過(guò)多種方案的測(cè)試，決定選用以下方案：在touchmove事件中通過(guò)條件判斷選擇性的阻止默認(rèn)滑動(dòng)事件，完美解決了安卓的bug，順便把iphone下屏幕輕微晃動(dòng)的問(wèn)題也解決了!

var startX,  startY, endX, endY;
$(element).on('touchstart', touchStart).on('touchmove', touchMove).on('touchend', touchEnd);
function touchStart(event){
    if (event.targetTouches.length == 1) {
        var touch = event.targetTouches[0];
        startX = touch.pageX;
        startY = touch.pageY;
    };
}
function touchMove(event){
    if (event.targetTouches.length == 1) {        var touch = event.targetTouches[0];
        endX = touch.pageX;
        endY = touch.pageY;       
/* 橫向滑動(dòng)事件，當(dāng)橫向移動(dòng)超過(guò)30并且縱向移動(dòng)不超過(guò)10時(shí)觸發(fā) */ 
        if (Math.abs(startX - endX)> 30 && Math.abs(startY - endY) < 10) {
              event.preventDefault; 
        }
    };
}
function touchEnd(event){
    var $obj = $('#obj');    
/* 左滑事件 */ 
    if (startX - endX > 30 && Math.abs(startY - endY) < 10) {
        $obj.css({left:'-80px'});
    }
}

移動(dòng)端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)

移動(dòng)設(shè)備上的web網(wǎng)頁(yè)是有300ms延遲的，玩玩會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。
以下是歷史原因：
2007年蘋(píng)果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁(yè)能比較好的展示在手機(jī)端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機(jī)上用瀏覽器打開(kāi)一個(gè)PC上的網(wǎng)頁(yè)，你可能在看到頁(yè)面內(nèi)容雖然可以撐滿整個(gè)屏幕，但是字體、圖片都很小看不清，此時(shí)可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。
雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁(yè)縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候，例如跳轉(zhuǎn)鏈接<a href="#"></a>，此處瀏覽器會(huì)先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會(huì)先Hold一段時(shí)間t，如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會(huì)做單擊跳轉(zhuǎn)鏈接的處理，如果t時(shí)間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會(huì)禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對(duì)該部分區(qū)域頁(yè)面的縮放操作。那么這個(gè)時(shí)間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來(lái)。造成的后果用戶純粹單擊頁(yè)面，頁(yè)面需要過(guò)一段時(shí)間才響應(yīng)，給用戶慢體驗(yàn)感覺(jué)，對(duì)于web開(kāi)發(fā)者來(lái)說(shuō)是，頁(yè)面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。
解決方案：

• fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲
• zepto的touch模塊，tap事件也是為了解決在click的延遲問(wèn)題

#######觸摸事件的響應(yīng)順序

• ontouchstart
• ontouchmove
• ontouchend
• onclick
  解決300ms延遲的問(wèn)題，也可以通過(guò)綁定ontouchstart事件，加快對(duì)事件的響應(yīng)

什么是Retina 顯示屏，帶來(lái)了什么問(wèn)題

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋(píng)果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)
在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍
那么，前端的應(yīng)對(duì)方案是：
設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2

//例如圖片寬高為：200px*200px，那么寫(xiě)法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫(xiě)法為20px

.css{font-size:20px}

ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉

ios用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0);}

android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; }

-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
另外，有些機(jī)型去除不了，如小米2
對(duì)于按鈕類(lèi)還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽

webkit表單元素的默認(rèn)外觀怎么重置

.css{-webkit-appearance:none;}

#######webkit表單輸入框placeholder的顏色值怎么改變

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

webkit表單輸入框placeholder的文字能換行么

ios可以，android不行~
在textarea標(biāo)簽下都可以換行~

IE10（winphone8）表單元素默認(rèn)外觀如何重置

禁用 select默認(rèn)下拉箭頭

::-ms-expand 適用于表單選擇控件下拉箭頭的修改，有多個(gè)屬性值，設(shè)置它隱藏 (display:none) 并使用背景圖片來(lái)修飾可得到我們想要的效果。

select::-ms-expand {display: none;}

禁用 radio 和 checkbox 默認(rèn)樣式

::-ms-check 適用于表單復(fù)選框或單選按鈕默認(rèn)圖標(biāo)的修改，同樣有多個(gè)屬性值，設(shè)置它隱藏 (display:none) 并使用背景圖片來(lái)修飾可得到我們想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}

禁用PC端表單輸入框默認(rèn)清除按鈕

當(dāng)表單文本輸入框輸入內(nèi)容后會(huì)顯示文本清除按鈕，::-ms-clear 適用于該清除按鈕的修改，同樣設(shè)置使它隱藏 (display:none) 并使用背景圖片來(lái)修飾可得到我們想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}

如何阻止windows Phone的默認(rèn)觸摸事件

winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無(wú)效的
目前解決方法是使用樣式來(lái)禁用

html{-ms-touch-action: none;}/* 禁止winphone默認(rèn)觸摸事件 */

禁止ios 長(zhǎng)按時(shí)觸發(fā)系統(tǒng)的菜單，禁止ios&android長(zhǎng)按時(shí)下載圖片

.css{-webkit-touch-callout: none}

打電話發(fā)短信寫(xiě)郵件怎么實(shí)現(xiàn)

<a href="tel:0755-10086">打電話給:0755-10086</a>
<a href="sms:10086">發(fā)短信給: 10086</a>
<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

取消input在ios下，輸入的時(shí)候英文首字母的默認(rèn)大寫(xiě)

<input autocapitalize="off" autocorrect="off" />

android 上去掉語(yǔ)音輸入按鈕

input::-webkit-input-speech-button {display: none}