1. 程式人生 > >web頁面一些移動端樣式屬性設定

web頁面一些移動端樣式屬性設定

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>

未完後續工作中涉及到再陸續新增