移動端web開發整理

 

/* 移動端定義字體的代碼 */
body {
　　font-family: "Helvetica Neue", Helvetica;
}

 

ios端觸摸時，會出現一個半透明灰色遮罩
　　若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0

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

 

關於 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)
　　iOS 瀏覽器橫屏時會重置字體大小

body{
　　-webkit-text-size-adjust: 100%;
　　text-size-adjust: 100%;
}

 

禁止 iOS 彈出各類操做窗口
-webkit-touch-callout:none;

 

禁止用戶選中文字
-webkit-user-select:none;

 

上下拉動滾動條時卡頓、慢

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

IOS設備輸入框默認內陰影
input {
　　-webkit-appearance: none;
}

 

// 阻止頁面滑動的默認行爲document.body.addEventListener('touchmove', function(event) { 　　if (event.cancelable) { 　　// 判斷默認行爲是否已經被禁用 　　　　(!event.defaultPrevented) && event.preventDefault(); 　　}});