web頁面一些移動端樣式屬性設定
阿新 • • 發佈:2019-01-10
1.有些頁面在iPhone手機下的瀏覽器會出現點選有一個蒙版出現,可以通過以下css樣式消除
html{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
2.移動端響應式頁面要加上如下的表頭
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
3.iPhone的Safari瀏覽器會識別一些電話號碼加上了一些不好看的樣式,可以通過以下meta標籤消除
<meta name="format-detection" content="telephone=no" />
4.消除a連結的一些點選,訪問等出現的一些樣式
a { text-decoration: none; }
a:hover { text-decoration: none; }
a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline :none;
background: none;
text-decoration: none;
color:#000000;
}
5.頁面自適應螢幕使用rem設計網頁的寬度
<script>
/* 長寬佔位 rem演算法, 根據root的rem來計算各元素相對rem, 預設html 320/20 = 16px */
function placeholderPic(){
var w = document.documentElement.offsetWidth;
document.documentElement.style.fontSize=w/20+'px';
}
placeholderPic();
window.onresize=function (){
placeholderPic();
}
</script>
未完後續工作中涉及到再陸續新增