移動(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)手指離開屏幕時(shí)觸發(fā)
• touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過程中突然頁(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事件的寫法

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'});
    }
}

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

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)超過30并且縱向移動(dòng)不超過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年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁(yè)能比較好的展示在手機(jī)端上缘屹，使用了雙擊縮放(double tap to zoom)的方案凛剥，比如你在手機(jī)上用瀏覽器打開一個(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è)面需要過一段時(shí)間才響應(yīng)谭梗，給用戶慢體驗(yàn)感覺，對(duì)于web開發(fā)者來(lái)說(shuō)是宛蚓，頁(yè)面js捕獲click事件的回調(diào)函數(shù)處理激捏，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理凄吏。
解決方案：

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

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

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

什么是Retina 顯示屏图柏，帶來(lái)了什么問題

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)任连，如在同樣帶下的屏幕上蚤吹，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)
在高清顯示屏中的位圖被放大随抠，圖片會(huì)變得模糊裁着，因此移動(dòng)端的視覺稿通常會(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二驰，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來(lái)的1/2，例如視覺稿40px的字體秉沼，使用樣式的寫法為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ì)于按鈕類還有個(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ā)短信寫郵件怎么實(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)大寫

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

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

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