開發項目遇到的大大小小問題總結

 

 

 1移動端輸入六位密碼 光標位置不對

解決辦法，把它移到看不見的地方
input{
       text-indent: -999em;
       margin-left: -100%;
       width: 200%!important;
  }

2  textarea 文本域
    resize: none; //禁止放大
    overflow-y: hidden;  //進度條

3 遮罩層
.shelter{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 10;
    display: none;
}

4 打電話,發短信
<a href="tel:0755-10086">打電話給:0755-10086</a>
<a href="sms:10086">發短信給: 10086</a>


5  rem px 移動端適配問題
移動端字體單位font-size選擇px仍是rem
　　對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可
　　對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較大的設備  
@media screen and (max-width: 321px) {
    body {
        font-size: 16px;
    }
}
@media screen and (min-width: 321px) and (max-width: 400px) {
    body {
        font-size: 17px;
    }
}
@media screen and (min-width: 400px) {
    body {
        font-size: 19px;
    }
}
<script>
    // px與rem單位的換算
    (function(){
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    })();
</script>

6 可輸入的div
<--輸入完後，準備點擊肯定按鈕回覆-->
<div contenteditable="true" data-id="+result.id+" class="shopReply">回覆買家</div>
<--已回覆買家的評價-->
<div contenteditable="false" data-id="+result.id+" class="shopReply">謝謝您，咱們會更好的爲您服務</div>

div上模擬placeholder
<div id="content" class="inputcontent needsclick" placeholder="有問題就儘管提問吧" contenteditable="true"></div>
<style>
.inputcontent:after {
            display: inline-block;
            width: 100%;
            color: #999;
            content: attr(placeholder);
        }
</style>


7 重定向
重定向是網頁製做中的一個知識，幾個例子跟你說明，假設你如今所處的位置是一個論壇的登陸頁面，你填寫了賬號，密碼，點擊登錄，若是你的賬號密碼正確，就自動跳轉到論壇的首頁，不正確就返回登陸頁；這裏的自動跳轉，就是重定向的意思。或者能夠說，重定向就是，在網頁上設置一個約束條件，條件知足，就自動轉入到其它網頁、網址。
    window.location.href = 'goods_management.html?tab=audit';

8 input文本框輸入數字時，小數點後面只保留2位
$('#goodsPrice').blur(function() {
    var money = $(this).val() - 0.0;
    $(this).val(money.toFixed(2));
});

9 刷新當前頁面
window.location.reload()：    //刷新當前頁面
<meta http-equiv="refresh" content="3600">   //1小時刷新一次

10  移動端 1px border 實現
部分安卓機器(好比小米)的分辨率低，若是border的寬度小於1px。安卓機出現一種邊框消失了的現象。樣式上有點奇怪，IOS沒有這個問題。
因爲設備高分辨率屏的緣由，邏輯像素的 1px 的 border 在移動設備上會用兩個或三個物理像素來表示，因此看起來會感受很粗。解決方案有不少，但兼容性最好的方案是用僞元素的 box-shadow 或 border 實現 border，而後用 transform: scale(.5) 縮小到原來的一半

11  阻止旋轉屏幕時自動調整字體大小
          * {
               -webkit-text-size-adjust: none;
           }
     禁止 iOS 識別長串數字爲電話
          <meta name="format-detection" content="telephone=no" />
     input的placeholder會出現文本位置偏上的狀況
           line-height：normal;

12 鍵盤
<input type="number" pattern="[0-9]*" />
<input type="password" pattern="[0-9]*" />
注意：只有number或者tel仍是不夠，只有加入正則，ios纔會出現九宮格

13  flex佈局
display: flex;
display: -webkit-box;
display: -webkit-flex; 
注： 若是用flx佈局必需要加，不加的話，ios版本爲8的機子頁面會錯亂


進羣免費領取資料哦~WEB前端互動交流羣434623999