聲明:本篇文章來源於 查看原文
css
一、移動端頁面設置視口寬度等於設備寬度,並禁止縮放。html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
二、移動端頁面設置視口寬度等於定寬(如640px),並禁止縮放,經常使用於微信瀏覽器頁面。android
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
三、禁止將頁面中的數字識別爲電話號碼ios
<meta name="format-detection" content="telephone=no" />
四、忽略Android平臺中對郵箱地址的識別web
<meta name="format-detection" content="email=no" />
五、當網站添加到主屏幕快速啓動方式,可隱藏地址欄,僅針對ios的safariapi
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本之後,safari上已看不到效果 -->
六、將網站添加到主屏幕快速啓動方式,僅針對ios的safari頂端狀態條的樣式瀏覽器
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可選default、black、black-translucent -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>title</title> <link rel="stylesheet" href="index.css"> </head> <body> content... </body> </html>
一、禁止ios和android用戶選中文字微信
.css{-webkit-user-select:none}
二、禁止ios長按時觸發系統的菜單,禁止ios&android長按時下載圖片app
.css{-webkit-touch-callout: none}
三、webkit去除表單元素的默認樣式less
.css{-webkit-appearance:none;}
四、修改webkit表單輸入框placeholder的樣式
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
五、去除android a/button/input標籤被點擊時產生的邊框 & 去除ios a標籤被點擊時產生的半透明灰色背景
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
六、ios使用-webkit-text-size-adjust禁止調整字體大小
body{-webkit-text-size-adjust: 100%!important;}
七、android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
八、移動端定義字體,移動端沒有微軟雅黑字體
/* 移動端定義字體的代碼 */ body{font-family:Helvetica;}
九、禁用Webkit內核瀏覽器的文字大小調整功能
-webkit-text-size-adjust: none;
九、移動端1px問題
//HTML部分: <div class='class1'></div> //css部分: .class1{ border: 1px solid #ccc; } //css部分 /*移動端正常展現1px的問題 start*/ %border-1px{ display: block; position:absolute; left: 0; width: 100%; content: ' '; } .border-1px{ position: relative; &::after{ @extend %border-1px; bottom: 0; border-top: 1px solid #ccc; } &::before{ @extend %border-1px; top: 0; border-bottom: 1px solid #ccc; } } @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ .border-1px{ &::after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } } @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } } /*移動端正常展現1px的問題 end*/
一、手機拍照和上傳圖片
<!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*">
二、取消input在ios下,輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
三、打電話和發短信
<a href="tel:0755-10086">打電話給:0755-10086</a> <a href="sms:10086">發短信給: 10086</a>
/* hcysun */ @charset "utf-8"; /* reset */ html{ -webkit-text-size-adjust:none; -webkit-user-select:none; -webkit-touch-callout: none font-family: Helvetica; } body{font-size:12px;} body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;} a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;} em{font-style:normal} li{list-style:none} a{text-decoration:none;} img{border:none; vertical-align:top;} table{border-collapse:collapse;} textarea{ resize:none; overflow:auto;} /* end reset */
/* public */ /* 清除浮動 */ .clear { zoom:1; } .clear:after { content:''; display:block; clear:both; } /* 定義盒模型爲怪異和模型(寬高不受邊框影響) */ .boxSiz{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* 強制換行 */ .toWrap{ word-break: break-all; /* 只對英文起做用,以字母做爲換行依據。 */ word-wrap: break-word; /* 只對英文起做用,以單詞做爲換行依據。*/ white-space: pre-wrap; /* 只對中文起做用,強制換行。*/ } /* 禁止換行 */ .noWrap{ white-space:nowrap; } /* 禁止換行,超出省略號 */ .noWrapEllipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 多行顯示省略號,less寫法,@line是行數 */ .ellipsisLn(@line) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @line; } /* 1px 邊框解決方案,示例中設置上邊框,能夠調整 top、right、bottom、left 的值分別設置上下左右邊框 */ #box2:after{ content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #000; color: #C7C7C7; transform-origin: 0 0; transform: scaleY(0.5); } /* 文字兩端對齊 */ .text-justify{ text-align:justify; text-justify:inter-ideograph; } /* 定義盒模型爲 flex佈局兼容寫法並讓內容水平垂直居中 */ .flex-center{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center; } /* public end */
一、定義彈性盒模型兼容寫法
/* box inline-box */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box;
二、box-orient 定義盒模型內伸縮項目的佈局方向
/** * vertical column 垂直 * horizontal row 水平 默認值 */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -ms-flex-direction: row; -o-box-orient: horizontal; box-orient: horizontal;
三、box-direction 定義盒模型內伸縮項目的正序(normal默認值)、倒敘(reverse)
/* Firefox */ display:-moz-box; -moz-box-direction:reverse; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-direction:reverse;
四、box-pack 對盒子水平富裕空間的管理
/* start end center justify */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center;
五、box-pack 對盒子垂直方向富裕空間的管理
/* start end center */ /* box-align */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center;
六、定義伸縮項目的具體位置
/*-moz-box-ordinal-group:1;*/ /* Firefox */ /*-webkit-box-ordinal-group:1;*/ /* Safari 和 Chrome */ .box div:nth-of-type(1){-webkit-box-ordinal-group:1;} .box div:nth-of-type(2){-webkit-box-ordinal-group:2;} .box div:nth-of-type(3){-webkit-box-ordinal-group:3;} .box div:nth-of-type(4){-webkit-box-ordinal-group:4;} .box div:nth-of-type(5){-webkit-box-ordinal-group:5;}
七、定義伸縮項目佔空間的份數
-moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ .box div:nth-of-type(1){-webkit-box-flex:1;} .box div:nth-of-type(2){-webkit-box-flex:2;} .box div:nth-of-type(3){-webkit-box-flex:3;} .box div:nth-of-type(4){-webkit-box-flex:4;} .box div:nth-of-type(5){-webkit-box-flex:5;}
聲明:本篇文章來源於 查看原文