關於移動端開發的一些基礎設置問題

關於移動端開發的一些基礎設置問題

1.禁止頁面縮放

<head>

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

</head>

2.input框消除自動記憶功能

<input type="text" autocomplete="off">

//input的autocomplete屬性默認是on:其含義代表是否讓瀏覽器自動記錄之前輸入的值

//off:則關閉記錄

3.禁止用戶選中文字

-webkit-user-select:none

4.placeholder元素樣式的修改

input::-webkit-input-placeholder{color:red;} //input框提示的顏色

input:focus::-webkit-input-placeholder{color:green;} //聚焦時的提示的顏色

5.去除 button在 ios上的默認樣式

-webkit-appearance: none;

border-radius: 0

6.CSS 超過一定寬度省略號…顯示

overflow: hidden; /* 當字符串超過規定長度,顯示省略符*/

text-overflow:ellipsis;

white-space: nowrap;

7.流暢滾動

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

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

a, img { -webkit-touch-callout: none; /*禁止長按鏈接與圖片彈出菜單*/ }

9.禁止 a 標籤背景 
在移動端使用 a標籤做按鈕的時候,點按會出現一個“暗色”的背景,去掉該背景的方法如下

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章