重置樣式相關(guān)
移動(dòng)端瀏覽器（部分iphone）橫豎屏切換時(shí)，字體大小變化
檢索或設(shè)置移動(dòng)端頁(yè)面中對(duì)象文本的大小調(diào)整铛绰。
該屬性只在移動(dòng)設(shè)備上生效诈茧；
如果你的頁(yè)面沒(méi)有定義meta viewport，此屬性定義將無(wú)效捂掰；
之前有人提到過(guò)使用該屬性取消瀏覽器最小字體限制敢会，已經(jīng)無(wú)效了
-webkit-text-size-adjust: 100%|none;
只對(duì)chrome27.0 版本以下有效曾沈，27.0以上版本無(wú)效；
只對(duì)英文才有效鸥昏，對(duì)中文無(wú)效塞俱。
使用：
-webkit-text-size-adjust : none|100% ;
-moz-text-size-adjust : none|100% ;
-ms-text-size-adjust : none|100% ;
text-size-adjust : none|100% ；
更推薦100%互广；none可能帶來(lái)的副作用：這會(huì)導(dǎo)致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit瀏覽器無(wú)法人為放大文字大小
重設(shè)可點(diǎn)擊元素的點(diǎn)擊選中效果
這個(gè)屬性只用于iOS (iPhone和iPad)敛腌。當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò)Javascript定義的可點(diǎn)擊元素的時(shí)候，默認(rèn)會(huì)出現(xiàn)一個(gè)半透明的灰色背景惫皱，重設(shè)這個(gè)屬性以實(shí)現(xiàn)自定義高亮特效
-webkit-tap-highlight-color
去除IOS下輸入框像樊、按鈕陰影和圓角
input, select,textarea,button {border: 0; border-radius: 0; -webkit-appearance: none;appearance:none;}
禁用文本選中
user-select
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
可能的副作用：個(gè)別Android機(jī)型（Google Nexus，Android 4.2.2）輸入框無(wú)法輸入
https://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field
兩行省略
float定位移動(dòng)端可能撐不開(kāi)高度
ul li 使用內(nèi)容撐開(kāi)
fixed定位問(wèn)題
- safari下 可能出現(xiàn)的點(diǎn)透問(wèn)題
目前發(fā)現(xiàn)的復(fù)現(xiàn)場(chǎng)景：
瀏覽器有標(biāo)簽欄旅敷，即打開(kāi)多個(gè)頁(yè)面
更容易復(fù)現(xiàn)：頁(yè)面y方向可滾動(dòng)
復(fù)現(xiàn)方式：豎屏加載頁(yè)面切換橫屏生棍；橫屏上下滑動(dòng)隱藏導(dǎo)航欄以及顯示導(dǎo)航欄時(shí) - 輸入框彈出 fixed定位出錯(cuò)的問(wèn)題？（新版本的ios已經(jīng)修復(fù)）
滾動(dòng)事件
常見(jiàn)滾動(dòng)問(wèn)題：
- “滾動(dòng)延遲"
現(xiàn)象：
當(dāng)做頁(yè)面scroll才顯示某些元素的功能時(shí)媳谁，發(fā)現(xiàn)某些瀏覽器下(iphone)滾動(dòng)期間即使?jié)L動(dòng)到指定位置并不會(huì)觸發(fā)目標(biāo)元素顯示涂滴，而是要停止?jié)L動(dòng)后才會(huì)觸發(fā)目標(biāo)元素顯示；
在滾動(dòng)期間會(huì)禁止部分由監(jiān)聽(tīng)scroll事件導(dǎo)致的頁(yè)面渲染
已知會(huì)受到禁止：顯示和隱藏（display:block|none） 透明度變化 dom節(jié)點(diǎn)增加
不會(huì)受到禁止：背景色晴音、字色
解決： 自行實(shí)現(xiàn)滾動(dòng)方案（touch transition動(dòng)畫(huà)）柔纵，借助iscroll better-scroll等庫(kù)
-webkit-overflow-scrolling: auto 設(shè)置在body上 safari會(huì)生效 微信內(nèi)置不會(huì)生效
但即使生效 也仍有上述現(xiàn)象
- 滾動(dòng)穿透
現(xiàn)象：底部頁(yè)面高度>100%有 fixed 遮罩背景和彈出層時(shí)，彈出層的滾動(dòng)會(huì)引起頁(yè)面滾動(dòng)
即使設(shè)置 html body overflow:hidden也無(wú)效
解決思路：
彈窗出現(xiàn)時(shí)： 記錄當(dāng)前滾動(dòng)位置 設(shè)置body為position:fixed
彈窗隱藏時(shí)： 恢復(fù)body的position設(shè)置锤躁，恢復(fù)當(dāng)前滾動(dòng)位置
副作用：彈窗的彈性滾動(dòng)會(huì)失效
-webkit-overflow-scrolling: touch設(shè)置到目標(biāo)彈窗上
橫豎屏切換
mediaquery css方案
@media screen and (orientation:landscape)
@media screen and (orientation:portrait)
portrait: 指定輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度大于或等于寬度
landscape: 其他所有情況
檢測(cè)搁料？切換事件？
應(yīng)用場(chǎng)景：橫豎屏切換dom節(jié)點(diǎn)不同系羞，切換后需要狀態(tài)同步
orientation（非標(biāo)準(zhǔn)郭计，僅部分移動(dòng)端瀏覽器支持）不建議使用
定時(shí)器檢測(cè)
resize
if(window.innerWidth > window.innerHeight){
meta.init = 'landscape';
meta.current = 'landscape';
} else {
meta.init = 'portrait';
meta.current = 'portrait';
}
減少resize觸發(fā)頻率
進(jìn)一步：
采用自定義事件訂閱與發(fā)布模式
重寫(xiě)window.orientation事件
https://segmentfault.com/a/1190000006889504
滑動(dòng)事件優(yōu)化：滾動(dòng)穿透 scroll監(jiān)聽(tīng)延遲 停止?jié)L動(dòng)時(shí) 才會(huì)觸發(fā)scroll事件 而不是實(shí)時(shí)觸發(fā)
用了這個(gè)better-scroll（用了之后 window.resize失效？）
https://zhuanlan.zhihu.com/p/27407024
cal()兼容
js計(jì)算椒振，設(shè)備寬度和高度獲取
document.documentElement.clientHeight
一些奇怪的問(wèn)題：
彈框百分比高度 在chrome模擬器和真機(jī)上展示不同
部分webview relative布局層級(jí)可能會(huì)被fixed定位層級(jí)覆蓋（重繪時(shí)且即使zindex層級(jí)比較高）
其他文章收集
http://blog.csdn.net/hardgirls/article/details/51722519
