html5_css 3 學習指南__轉

width - viewport的寬度
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例
user-scalable - 用戶是否能夠手動縮放第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

在設置了initial-scale=1 以後，咱們終於能夠以1:1 的比例進行頁面設計了。關於viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器徹底沒有滾動條，並且不是簡單的「隱藏滾動條」，是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁，而後用viewport 查看其中的一部分。當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行爲的改變不止是滾動條，交互事件也跟普通桌面不同。 (請參考：指尖的下JS 系列文章)

其中viewport相關的知識也能夠參考個人文章

此像素非彼像素

點擊與click事件

對於a標記的點擊導航，默認是在onclick事件中處理的。而移動客戶端對onclick的響應相比PC瀏覽器有着明顯的幾百毫秒延遲。

在移動瀏覽器中對觸摸事件的響應順序應當是：

ontouchstart -> ontouchmove -> ontouchend -> onclick

所以，若是確實要加快對點擊事件的響應，就應當綁定ontouchend事件。

使用click會出現綁定點擊區域閃一下的狀況，解決：給該元素一個樣式以下

-webkit-tap-highlight-color: rgba(0,0,0,0);

若是不使用click，也不能簡單的用touchstart或touchend替代，須要用touchstart的模擬一個click事件，而且不能發生touchmove事件，或者用zepto中的tap（輕擊）事件。

body
{
-webkit-overflow-scrolling: touch;
}

用iphone或ipad瀏覽很長的網頁滾動時的滑動效果很不錯吧？不過若是是一個div，而後設置

height:200px;overflow:auto;

的話，能夠滾動可是徹底沒有那滑動效果，很鬱悶吧？我看到不少網站爲了實現這一效果，用了第三方類庫，最經常使用的是iscroll（包括新浪手機頁，百度等）我一開始也使用，不過自從用了-webkit-overflow-scrolling: touch;樣式後，就徹底能夠拋棄第三方類庫了，把它加在body{}區域，全部的overflow須要滾動的均可以生效了。

詳見 http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ 頁面描述

<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

這個屬性是當用戶把鏈接保存到手機桌面時使用的圖標，若是不設置，則會用網頁的截圖。有了這，就可讓你的網頁像APP同樣存在手機裏了

<link rel="apple-touch-startup-image" href="/img/startup.png" />

這個是APP啓動畫面圖片，用途和上面的相似，若是不設置，啓動畫面就是白屏，圖片像素就是手機全屏的像素

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

這個描述是表示打開的web app的最上面的時間、信號欄是黑色的，固然也能夠設置其它參數，詳細參數說明在：

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html 裏

<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />

這2個描述也頗有用的，若是沒有它，你的web app會用safari瀏覽器打開，有了它，就會用獨立進程的無地址欄的打開，徹底能夠和普通的APP比擬了

下面還有個不錯的css，是用來區分視網膜屏幕的，這樣你能夠在iphone這樣的手機裏載入2x的圖片，就不會模糊了

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)
{
#logo{background-image: url(logo@2x.png);}
}

樣式表:

<link rel=」apple-touch-startup-image」 href=」startup.png」 /> // 設置開始頁面圖片
<link rel=」apple-touch-icon」 href=」iphon_tetris_icon.png」/> // 在設置書籤的時候能夠顯示好看的圖標
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式樣式
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"   // 風景模式樣式

//豎屏時使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>

//橫屏時使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>

手機瀏覽器經常使用手勢動做監聽封裝(配合zepto,來自mansonchor)

http://wo.poco.cn/manson/post/id/268780

事件： (請參考：指尖的下JS 系列文章)

手勢事件

touchstart //當手指接觸屏幕時觸發
touchmove //當已經接觸屏幕的手指開始移動後觸發
touchend //當手指離開屏幕時觸發
touchcancel

觸摸事件

gesturestart //當兩個手指接觸屏幕時觸發
gesturechange //當兩個手指接觸屏幕後開始移動時觸發
gestureend

屏幕旋轉事件

onorientationchange

檢測觸摸屏幕的手指什麼時候改變方向

orientationchange

touch事件支持的相關屬性

touches
targetTouches
changedTouches
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX　　　 // Relative to the screen
screenY 　　 // Relative to the screen
pageX　　　　// Relative to the full page (includes scrolling)
pageY　　　　 // Relative to the full page (includes scrolling)
target　　　　 // Node the touch event originated from
identifier　　 // An identifying number, unique to each touch event
屏幕旋轉事件：onorientationchange 添加屏幕旋轉事件偵聽，可隨時發現屏幕旋轉狀態（左旋、右旋仍是沒旋）。例子：

判斷屏幕是否旋轉

function orientationChange() {
    switch(window.orientation) {
    　　case 0:
            alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    　　case -90:
            alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    　　case 90:
            alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    　　case 180:
        　　alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
        　　break;
    };<br>};

添加事件監聽

addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
});

隱藏地址欄 & 處理事件的時候，防止滾動條出現：

// 隱藏地址欄  & 處理事件的時候 ，防止滾動條出現
addEventListener('load', function(){
        setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

雙手指滑動事件：

// 雙手指滑動事件
addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},
    false              // 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段)
);
function twoFingerScroll(ev) {
    var delta =ev.wheelDelta/120;              //對 delta 值進行判斷(好比正負) ，然後執行相應操做
    return true;
};

判斷是否爲iPhone：

// 判斷是否爲 iPhone ：
function isAppleMobile() {
    return (navigator.platform.indexOf('iPad') != -1);
};

localStorage:

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   // 若是名稱是  n 的數據存在 ，則將其讀出 ，賦予變量  v  。
localStorage.setItem('n', v);                                           // 寫入名稱爲 n、值爲  v  的數據
localStorage.removeItem('n');                                           // 刪除名稱爲  n  的數據

使用特殊連接：

若是你關閉自動識別後，又但願某些電話號碼可以連接到 iPhone 的撥號功能，那麼能夠經過這樣來聲明電話連接 ,

<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發短信</a>

或用於單元格：

自動大寫與自動修正

要關閉這兩項功能，能夠經過autocapitalize 與autocorrect 這兩個選項：

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

WebKit CSS:

①「盒模型」的具體描述性質的包圍盒塊內容，包括邊界，填充等等。

-webkit-border-bottom-left-radius: radius;
-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius;      //容器圓角
-webkit-box-sizing: sizing_model; 邊框常量值：border-box/content-box
-webkit-box-shadow: hoff voff blur color; //容器陰影（參數分別爲：水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半徑值；陰影顏色值）
-webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button;   //內置的CSS 表現，暫時只支持push-button

②「視覺格式化模型」描述性質，肯定了位置和大小的塊元素。

direction: rtl
unicode-bidi: bidi-override; 常量：bidi-override/embed/normal

③「視覺效果」描述屬性，調整的視覺效果塊內容，包括溢出行爲，調整行爲，能見度，動畫，變換，和過渡。

clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量：auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 動畫效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量：visible(默認值)/hidden
-webkit-box-reflect: right 1px; 鏡向反轉
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;   //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量：fixed/scroll
-webkit-perspective: value; 常量：none(默認)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 與3D)

④「生成的內容，自動編號，並列出」描述屬性，容許您更改內容的一個組成部分，建立自動編號的章節和標題，和操縱的風格清單的內容。

content: 「Item」 counter(section) 」 「;
This resets the counter.
First section
>two section
three section
counter-increment: section 1;
counter-reset: section;

⑤「分頁媒體」描述性能與外觀的屬性，控制印刷版本的網頁，如分頁符的行爲。

page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid

⑥「顏色和背景」描述屬性控制背景下的塊級元素和顏色的文本內容的組成部分。

-webkit-background-clip: content; 常量：border/content/padding/text
-webkit-background-origin: padding; 常量：border/content/padding/text
-webkit-background-size: 55px; 常量：length/length_x/length_y

⑦ 「字型」的具體描述性質的文字字體的選擇範圍內的一個因素。報告還描述屬性用於下載字體定義。

unicode-range: U+00-FF, U+980-9FF;

⑧「文本」描述屬性的特定文字樣式，間距和自動滾屏。

text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量：break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量：direction(方向) increment(迭代次數) repetition(重複) style(樣式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(無窮次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量：circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量：normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量： normal/space
-webkit-rtl-ordering: logical; 常量：visual/logical
-webkit-user-drag: element; 常量：element/auto/none
-webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量：text/auto/none

⑨「表格」描述的佈局和設計性能表的具體內容。

-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量：always/auto/avoid/left/right
-webkit-column-break-before: right; 常量：always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量：avoid/auto
-webkit-column-count: 3; //分欄
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid

⑩「用戶界面」描述屬性，涉及到用戶界面元素在瀏覽器中，如滾動文字區，滾動條，等等。報告還描述屬性，範圍之外的網頁內容，如光標的標註樣式和顯示當您按住觸摸觸摸目標，如在iPhone上的連接。

-webkit-box-align: baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch
-webkit-box-direction: normal;常量：normal/reverse
-webkit-box-flex: flex_valuet
-webkit-box-flex-group: group_number
-webkit-box-lines: multiple; 常量：multiple/single
-webkit-box-ordinal-group: group_number
-webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; 常量：center/end/justify/start

動畫過渡這是 Webkit 中最具創新力的特性：使用過渡函數定義動畫。

-webkit-animation: title infinite ease-in-out 3s;
animation 有這幾個屬性：
-webkit-animation-name： //屬性名，就是咱們定義的keyframes
-webkit-animation-duration：3s //持續時間
-webkit-animation-timing-function： //過渡類型：ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
-webkit-animation-delay：10ms //動畫延遲(默認0)
-webkit-animation-iteration-count： //循環次數(默認1)，infinite 爲無限
-webkit-animation-direction： //動畫方式：normal(默認 正向播放)； alternate(交替方向，第偶數次正向播放，第奇數次反向播放)

這些一樣是能夠簡寫的。但真正讓我覺的很爽的是keyframes，它能定義一個動畫的轉變過程供調用，過程爲0%到100%或from(0%)到to(100%)。簡單點說，只要你有想法，你想讓元素在這個過程當中以什麼樣的方式改變都是很簡單的。

-webkit-transform: 類型（縮放scale/旋轉rotate/傾斜skew/位移translate）
scale(num,num) 放大倍率。scaleX 和 scaleY(3)，能夠簡寫爲：scale(* , *)
rotate(*deg) 轉動角度。rotateX 和 rotateY，能夠簡寫爲：rotate(* , *)
Skew(*deg) 傾斜角度。skewX 和skewY，可簡寫爲：skew(* , *)
translate(*,*) 座標移動。translateX 和translateY，可簡寫爲：translate(* , *)。

利用media query監聽

media query相信大部分人已經使用過了。其實javascript能夠配合media query這麼用：

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 
function handleOrientationChange(mql) {
  if (mql.matches) {
    alert('The device is currently in portrait orientation ')
  } else {
    alert('The device is currently in landscape orientation')
  }}

我我的理解，是藉助了media query接口作的事件監聽，因此很強大！

鎖定 viewport

ontouchmove="event.preventDefault()" //鎖定viewport，任何屏幕操做不移動用戶界面（彈出鍵盤除外）。

被點擊元素的外觀變化，可使用樣式來設定：

-webkit-tap-highlight-color: 顏色

偵測iPhone/iPod

開發特定設備的移動網站，首先要作的就是設備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，而後轉向到專屬的URL。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
　　if (document.cookie.indexOf("iphone_redirect=false") == -1) {
　　　　window.location = "http://m.example.com";
　　}
}

雖然Javascript是能夠在水果設備上運行的，可是用戶仍是能夠禁用。它也會形成客戶端刷新和額外的數據傳輸，因此下面是服務器端偵測和轉向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
　　header('Location: http://yoursite.com/iphone');
　　exit();
}

阻止旋轉屏幕時自動調整字體大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

iPhone才識別的CSS

若是不想設備偵測，能夠用CSS媒體查詢來專爲iPhone/iPod定義樣式。

@media screen and (max-device-width: 480px) {}

縮小圖片

網站的大圖一般寬度都超過480像素，若是用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠，咱們能夠用CSS讓iPhone自動將大圖片縮小顯示。

@media screen and (max-device-width: 480px){
　　img{max-width:100%;height:auto;}
}

模擬:hover僞類

由於iPhone並無鼠標指針，因此沒有hover事件。那麼CSS :hover僞類就沒用了。可是iPhone有Touch事件，onTouchStart 相似 onMouseOver，onTouchEnd 相似 onMouseOut。因此咱們能夠用它來模擬hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
　　myLinks[i].addEventListener(’touchstart’, function(){this.className = 「hover」;}, false);
　　myLinks[i].addEventListener(’touchend’, function(){this.className = 「」;}, false);
}

而後用CSS增長hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

這樣設計一個連接，感受能夠更像按鈕。而且，這個模擬能夠用在任何元素上。

flexbox佈局模板

flex模板

深刻了解flex佈局

##利用高質量圖片優化retina屏幕的顯示(來自大漠)

經典的文章

使用CSS3的background-size優化蘋果的Retina屏幕的圖像顯示

使用css sprites來優化你的網站在Retina屏幕下顯示

一個案例

安卓中viewport的width大於device-width時文字無端折行

http://www.iunbug.com/archives/2013/04/23/798.html

active的兼容(來自薛端陽)

今天發現，要讓a連接的Css active僞類生效，只須要給這個a連接的touch系列的任意事件touchstart/touchend綁定一個空的匿名方法便可hack成功

<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=」asdasd」>asdasd</a>
<script>
var a=document.getElementsByTagName(‘a’);
for(var i=0;i<a.length;i++){
a[i].addEventListener(‘touchstart’,function(){},false);
}
</script>

消除transition閃屏

兩個方法

-webkit-transform-style: preserve-3d;
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility:?hidden;
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/

消除ie10裏面的那個叉號

http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

input:-ms-clear{display:none;}

關於ios與os端字體的優化(橫豎屏會出現字體加粗不一致等)

http://blog.sina.com.cn/s/blog_6da647a601011u4v.html http://stackoverflow.com/questions/3220662/uiwebview-font-is-thinner-in-portrait-than-landscape

js事件

click 事件廣泛 300ms 的延遲在手機上綁定click 事件，會使得操做有300ms 的延遲，體驗並非很好。開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成

ios點擊會慢300ms

https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari

使用css3動畫的時儘可能利用3D加速，從而使得動畫變得流暢。動畫過程當中的動畫閃白能夠經過backface-visibility 隱藏。

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

常見的IPHONE 和 Android屏幕參數。

設備分辨率設備像素比率
Android LDPI 320×240 0.75
Iphone 3 & Android MDPI 320×480 1
Android HDPI 480×800 1.5
Iphone 4 960×640 2.0

Iphone 4的一個 CSS 像素實際上表現爲一塊 2×2 的像素。因此圖片像是被放大2倍同樣，模糊不清晰。

解決辦法：

一、頁面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />

二、CSS文件裏

#header {
    background:url(mdpi/bg.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /*CSS for high-density screens*/
    #header {
        background:url(hdpi/bg.png);
    }
}

ie10的特殊鼠標事件

http://www.mansonchor.com/blog/blog_detail_73.html

不讓android識別郵箱

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

禁止ios彈出各類操做窗口

-webkit-touch-callout:none

禁止用戶選中文字

-webkit-user-select:none

動畫效果中，使用translate比使用定位性能高

http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

拿到滾動條

window.scrollY
window.scrollX

好比要綁定一個touchmove的事件，正常的狀況下相似這樣(來自呼吸二氧化碳)

$('div').on('touchmove', function(){
//.….code
{});

而若是中間的code須要處理的東西多的話，fps就會降低影響程序順滑度，而若是改爲這樣

$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
{});

把代碼放在setTimeout中，會發現程序變快.

關於ios系統中，webapp啓動圖片在不一樣設備上的適應性設置

http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893

關於ios系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格(焦點科技葛亮)

能夠經過正則去掉

this.value = this.value.replace(/\u2006/g, '');

關於android webview中，input元素輸入時出現的怪異狀況

見圖

Android web視圖,至少在HTC EVO和三星的Galaxy Nexus中，文本輸入框在輸入時表現的就像佔位符。狀況爲一個相似水印的東西在用戶輸入區域，一旦用戶開始輸入便會消失(見圖片)。在android的默認樣式下當輸入框得到焦點後,若存在一個絕對定位或者fixed的元素，佈局會被破壞,其餘元素與系統輸入字段會發生重疊(如搜索圖標將消失爲搜索字段),能夠觀察到佈局與原始輸入字段有誤差(見截圖)。這是一個至關複雜的問題，如下簡單佈局能夠重現這個問題:

<label for="phone">Phone: *</label>
<input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />

解決方法

-webkit-user-modify: read-write-plaintext-only

詳細參考http://www.bielousov.com/2012/android-label-text-appears-in-input-field-as-a-placeholder/ 注意，該屬性會致使中文不能輸入詞組，只能單個字。感謝鬼哥與飛（遊勇飛）貢獻此問題與解決方案

另外，在position:fixed後的元素裏，儘可能不要使用輸入框。更多的bug可參考

http://www.cosdiv.com/page/M0/S882/882353.html

依舊沒法解決（摩托羅拉ME863手機），則使用input:text類型而非password類型，並設置其設置 -webkit-text-security: disc; 隱藏輸入密碼從而解決。

JS動態生成的select下拉菜單在Android2.x版本的默認瀏覽器裏不起做用

解決方法刪除了overflow-x:hidden; 而後在JS生成下來菜單以後focus聚焦，這兩步操做以後解決了問題。(來自島都-小Qi)

參考http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator

andriod上去掉語音輸入按鈕

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

移動瀏覽器篇

【UC瀏覽器】video標籤脫離文檔流

場景：標籤的父元素(祖輩元素)設置transform樣式後，標籤會脫離文檔流。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解決方案：不使用transform屬性。translate用top、margin等屬性替代。

【UC瀏覽器】video標籤總在最前

場景：標籤老是在最前（能夠理解爲video標籤的z-index屬性是Max）。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象

場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素。

　　　在8.6的版本,這個狀況直接出現。

　　　在8.7以後的版本,當同輩元素的height大於713這個「神奇」的數值時,纔會被遮擋。

測試環境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

【QQ手機瀏覽器】不支持HttpOnly

場景：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效。JavaScript能夠直接讀取設置了HttpOnly的Cookie值。

測試環境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。

【MIUI原生瀏覽器】瀏覽器地址欄hash不改變

場景：location.hash 被賦值後，地址欄的地址不會改變。

　　　但實際上 location.href 已經更新了，經過JavaScript能夠順利獲取到更新後的地址。

　　　雖然不影響正常訪問，但用戶沒法將訪問過程當中改變hash後的地址存爲書籤。

測試環境：MIUI 4.0

【Chrome Mobile】fixed元素沒法點擊

場景：父元素設置position: fixed;

　　　子元素設置position: absolute;

　　　此時，若是父元素/子元素還設置了overflow: hidden 則出現「父元素遮擋該子元素「的bug。

　　　視覺(view)層並無出現遮擋，只是沒法觸發綁定在該子元素上的事件。可理解爲：「看到點不到」。

補充：頁面往下滾動，觸發position: fixed;的特性時，纔會出現這個bug，在最頂不會出現。

測試平臺：小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解決辦法：把父元素和子元素的overflow: hidden去掉。

以上來源於 http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html

庫的使用實踐

zepto.js

zepto的一篇使用注意點講解

zepto的著名的tap「點透」bug

iscroll4

iscroll4的幾個bug(來自http://www.mansonchor.com/blog/blog_detail_64.html內有詳細講解)

1.滾動容器點擊input框、select等表單元素時沒有響應】

onBeforeScrollStart: function (e) { e.preventDefault(); }

改成

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }

2.往iscroll容器內添加內容時，容器閃動的bug

源代碼的

has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改爲

has3d = false

在配置iscroll時，useTransition設置成false

3.過長的滾動內容，致使卡頓和app直接閃退

1)不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味着你要消耗一個Interval的內存空間 2)隱藏iscroll滾動條，配置時設置hScrollbar和vScrollbar爲false。 3)不得已的狀況下，去掉各類效果，momentum、useTransform、useTransition都設置爲false

4.左右滾動時，不能正確響應正文上下拉動

iscroll的閃動問題也與渲染有關係，能夠參考運用webkit繪製渲染頁面原理解決iscroll4閃動的問題