移動端

基本設置:
html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maxmum-scale=1">
 6     <!-- 設置電話和郵件不可點擊-->
 7     <meta name="format-detection" content="telephone=no,email=no" />
 8     <!-- 設置app名字-->
 9     <meta name="apple-mobile-web-app-title" content="佳">
10      <!-- herf中放圖片地址,設置app的外觀-->
11     <link rel="apple-touch-icon-precomposed" href="">
12     <title>Document</title>
13     <style>
14             body{
15                 margin:0;
16                 /* 默認字體 */
17                 font-family:helvetica;
18             }
19             body{
20                 /* 禁止用戶選中文字 */
21                 -webkit-user-select:none;
22                 /* 禁止長按彈出系統菜單 */
23                 -webkit-touch-callout:none;
24                 /* 切換橫豎屏或者用戶本身經過瀏覽器設置的話,能夠改變字體的大小(須要給body下的全部元素)*/
25                 -webkit-text-size-adjust:100%;   
26             }
27             a,input,button{
28                 /* 去除android下a/botton/input標籤被點擊時產生的邊框 & 去除ios下a標籤被點擊時產生的半透明灰色背景*/
29                 -webkit-tap-highlight-color:rgba(0,0,0,0);
30                  
31             }
32             button,input{
33                 /* 去除按鈕圓角 */
34                 -webkit-appearance:none  /* button與inout都會有默認背景*/
35                 /* border-radius:0; */
36             }
37             /* 設置placeholder樣式,默認黑色,點擊變紅色 */
38             input::-webkit-input-placeholder{
39                   color:#000;
40             }
41             input:focus::-webkit-input-placeholder{
42                   color:#f00;
43             }
44         </style>
45 </head>
46 <body>
47     <p>13000000000</p>
48     <a href="#">dlfjdf;dk</a>
49     <button>吃飯</button>
50     <input type="text" value="睡覺">
51     <input type="text" placeholder="sjdksjk">
52 </body>
53 </html>
相關文章
相關標籤/搜索