2018-7-26 seo達人
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
字號
工作了有一段時間,基本上都在搞移動端的前端開發,工作的過程中遇到過很多問題,bug的解決方案,記錄下來,以便后用!!!內容并不是很全,以后每遇到一個問題都會總結在這里,分享給大家!
一、meta標簽相關知識
1、移動端頁面設置視口寬度等于設備寬度,并禁止縮放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2、移動端頁面設置視口寬度等于定寬(如640px
),并禁止縮放,常用于微信瀏覽器頁面。
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
3、禁止將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
4、忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
5、當網站添加到主屏幕快速啟動方式,可隱藏地址欄,僅針對ios的safari
6、將網站添加到主屏幕快速啟動方式,僅針對ios的safari頂端狀態條的樣式
viewport模板
二、CSS樣式技巧
1、禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
2、禁止ios長按時觸發系統的菜單,禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}
3、webkit去除表單元素的默認樣式
.css{-webkit-appearance:none;}
4、修改webkit表單輸入框placeholder的樣式
5、去除android a/button/input
標簽被點擊時產生的邊框 & 去除ios a
標簽被點擊時產生的半透明灰色背景
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
6、ios使用-webkit-text-size-adjust
禁止調整字體大小
body{-webkit-text-size-adjust: 100%!important;}
7、android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
8、移動端定義字體,移動端沒有微軟雅黑字體
三、其他技巧
1、手機拍照和上傳圖片
2、取消input在ios下,輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
3、打電話和發短信
四、CSS reset
五、常用公用CSS style
六、flex布局
1、定義彈性盒模型兼容寫法
2、box-orient 定義盒模型內伸縮項目的布局方向
3、box-direction 定義盒模型內伸縮項目的正序(normal默認值)、倒敘(reverse)
4、box-pack 對盒子水平富裕空間的管理
5、box-pack 對盒子垂直方向富裕空間的管理
6、定義伸縮項目的具體位置
7、定義伸縮項目占空間的份數
藍藍設計( www.devb.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務