移動端 h5開發遇到的問題總結

lily000000發表於2017-11-07

1、去掉 a,input 在移動端瀏覽器中的預設樣式 ①禁止 a 標籤背景 在移動端使用 a標籤做按鈕的時候,點按會出現一個“暗色”的背景,去掉該背景的方法如下

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點選時的藍色外邊框和灰色半透明背景*/
}
複製程式碼

②禁止長按 a,img 標籤長按出現選單欄 使用 a標籤的時候,移動端長按會出現一個 選單欄,這個時候禁止撥出選單欄的方法如下:

a, img {
    -webkit-touch-callout: none; /*禁止長按連結與圖片彈出選單*/
}
複製程式碼

③流暢滾動

body{
    -webkit-overflow-scrolling:touch;
}
複製程式碼

2、CSS 超過一定寬度省略號...顯示

{
    /*指定字串的寬度*/
    width:300px;   
    overflow: hidden;  
    /* 當字串超過規定長度,顯示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;   
}
複製程式碼

3、去除 button在 ios上的預設樣式

-webkit-appearance: none;
border-radius: 0 
複製程式碼

4、placeholder元素樣式的修改

input::-webkit-input-placeholder{color:red;} //input框提示的顏色
input:focus::-webkit-input-placeholder{color:green;} //聚焦時的提示的顏色
複製程式碼

5、禁止使用者選中文字

-webkit-user-select:none
複製程式碼

6、input框消除自動記憶功能

<input type="text" autocomplete="off">
//input的autocomplete屬性預設是on:其含義代表是否讓瀏覽器自動記錄之前輸入的值
//off:則關閉記錄
複製程式碼

7、h5頁面禁止縮放

<head>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
複製程式碼

持續更新中....

相關文章