[TOC]
## 阻止旋轉屏幕時自動調整字體大小
```css
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
```
## 去掉手持設備點擊時出現的透明層
```css
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
```
## transform變換z-index層級渲染異常
[層疊上下文](https://developer.mozilla.org/zh-CN/CSS/Understanding_z-index/The_stacking_context)
在一些瀏覽器或設備上,當 transform 和 z-index 在一起使用時會發生異樣,造成z-index失靈。至于為什么會失靈,以及如何解決,這里就不多講了。如果您對這方面的感興趣,可以看看@張鑫旭大師寫得一篇文章[《Safari 3D transform變換z-index層級渲染異常的研究》](http://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/)。
文章總結了兩種解決方案:
1. 父級,任意父級,非body級別,設置overflow:hidden可恢復和其他瀏覽器一樣的渲染
2. 以毒攻毒。也可以使用3D transform變換
## 何時使用Transform來實現z-index
在介紹 z-index 和 translate3d一節中,我們也了解到了,有時候設置z-index來控制z軸并不有效,張大師文章也提到過,它們在一起使用時,有時候會使用z-index失靈。其實還有一個現象,大家可能平時并沒有注意到。
當你通過z-index配合偽元素::before或者::after時讓其z軸在元素的底部,特別是碰到大的元素渲染(比如全屏背景圖),會直接影響性能,特別是在移動端,會造成客戶端閃退,也就是大家所說的Crash,給用戶造成非常不好的體驗。
縮合上面的幾個現象(當然可能還有很多我自己沒有發現的),我們可以拋棄z-index來控制z軸的順序,而是直接通過transform中的translateZ() 或者translate3d()來控制z軸的順序。
>原文: [z-index和transform](http://www.w3cplus.com/css/3d-transform-and-z-index.html) ? w3cplus.com
- 前言
- 中文字體
- 移動Web適配方案
- !移動Web基礎!
- 詳解適配相關概念
- 移動開發之設計稿
- 移動適配方案(一)
- 移動適配方案(二)
- vw+rem 實現移動端布局
- 移動端適配之雪碧圖(sprite)背景圖片定位
- 適配 iPhoneX
- 前端開發實戰
- 打造自己的前端開發流程(Gulp)
- flexible.js案例講解
- viewport 與 flexible.js解讀
- 圖片與字體
- 踩過的坑
- 瀏覽器默認樣式
- 300ms點擊延遲和點擊穿透
- ios css
- CSS 常見問題
- Ionic v1混合開發
- Native App、Web App 、Hybrid App?
- ionic項目結構
- 混淆加密
- 解決問題
- cordova
- 環境配置
- 打包發布
- 問題
- 移動前端開發優化
- Web開發之抓包
- ===web移動開發資源===
- H5組件框架
- 調試集合
- 簡單h5調試
- whistle
- devtools-pro