學前端開發适用于移動端常見的問題

　　常見問題

　　1、移動端如何定義字型font-family

　　三大手機系統的字型：

　　ios 系統

　　預設中文字型是Heiti SC

　　預設英文字型是Helvetica

　　預設數字字型是HelveticaNeue

　　無微軟雅黑字型

　　android 系統

　　預設中文字型是Droidsansfallback

　　預設英文和數字字型是Droid Sans

　　無微軟雅黑字型

　　winphone 系統

　　預設中文字型是Dengxian(方正等線體)

　　預設英文和數字字型是Segoe

　　無微軟雅黑字型

　　各個手機系統有自己的預設字型，且都不支援微軟雅黑

　　如無特殊需求，手機端無需定義中文字型，使用系統預設

　　英文字型和數字字型可使用 Helvetica ，三種系統都支援

　　* 移動端定義字型的代碼 */

　　body{font-family:Helvetica;}

　　2、移動端字型機關font-size選擇px還是rem

　　對于隻需要适配手機裝置，使用px即可

　　對于需要适配各種移動裝置，使用rem，例如隻需要适配iPhone和iPad等分辨率差别比較挺大的裝置

　　rem配置參考：

　　html {font-size:10px}

　　@media screen and (min-width:480px) and (max-width:639px) {

　　html {

　　font-size: 15px

　　}

　　}

　　@media screen and (min-width:640px) and (max-width:719px) {

　　html {

　　font-size: 20px

　　}

　　}

　　@media screen and (min-width:720px) and (max-width:749px) {

　　html {

　　font-size: 22.5px

　　}

　　}

　　@media screen and (min-width:750px) and (max-width:799px) {

　　html {

　　font-size: 23.5px

　　}

　　}

　　@media screen and (min-width:800px) and (max-width:959px) {

　　html {

　　font-size: 25px

　　}

　　}

　　@media screen and (min-width:960px) and (max-width:1079px) {

　　html {

　　font-size: 30px

　　}

　　}

　　@media screen and (min-width:1080px) {

　　html {

　　font-size: 32px

　　}

　　}

　　3、什麼是Retina 顯示屏，帶來了什麼問題

　　retina：一種具備超高像素密度的液晶屏，同樣大小的螢幕上顯示的像素點由1個變為多個，如在同樣帶下的螢幕上，蘋果裝置的retina顯示屏中，像素點1個變為4個

　　在高清顯示屏中的位圖被放大，圖檔會變得模糊，是以移動端的視覺稿通常會設計為傳統PC的2倍

　　那麼，前端的應對方案是：

　　設計稿切出來的圖檔長寬保證為偶數，并使用backgroud-size把圖檔縮小為原來的1/2

　　//例如圖檔寬高為：200px*200px，那麼寫法如下

　　.css{width:100px;height:100px;background-size:100px 100px;}

　　其它元素的取值為原來的1/2，例如視覺稿40px的字型，使用樣式的寫法為20px

　　.css{font-size:20px}

　　4、viewport模闆

　　這裡開始内容

　　5. 優先使用最新版本 IE 和 Chrome

　　6. 添加到主屏後的标題(IOS)

　　7. 啟用 WebApp 全屏模式(IOS)

　　當網站添加到主螢幕後再點選進行啟動時，可隐藏位址欄(從浏覽器跳轉或輸傳入連結接進入并沒有此效果)

　　8. 百度禁止轉碼

　　通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta标簽來禁止它：

　　10. 設定狀态欄的背景顔色(IOS)

　　設定狀态欄的背景顔色，隻有在 "apple-mobile-web-app-capable" content="yes" 時生效

　　content 參數：

　　default ：狀态欄背景是白色。

　　black ：狀态欄背景是黑色。

　　black-translucent ：狀态欄背景是半透明。 如果設定為 default 或 black ,網頁内容從狀态欄底部開始。 如果設定為 black-translucent ,網頁内容充滿整個螢幕，頂部會被狀态欄遮擋。

　　11. 移動端手機号碼識别(IOS)

　　在 iOS Safari (其他浏覽器和Android均不會)上會對那些看起來像是電話号碼的數字處理為電話連結，比如：

　　7位數字，形如：1234567

　　帶括号及加号的數字，形如：([phone]

　　雙連接配接線的數字，形如：00-00-00111

　　11位數字，形如：13800138000

　　可能還有其他類型的數字也會被識别。我們可以通過如下的meta來關閉電話号碼的自動識别：

　　12. 移動端郵箱識别(Android)

　　與電話号碼的識别一樣，在安卓上會對符合郵箱格式的字元串進行識别，我們可以通過如下的meta來管别郵箱的自動識别：

　　同樣地，我們也可以通過标簽屬性來開啟長按郵箱位址彈出郵件發送的功能：

　　[email protected]

　　13、ios系統中元素被觸摸時産生的半透明灰色遮罩怎麼去掉

　　ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩

　　a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

　　14、部分android系統中元素被點選時産生的邊框怎麼去掉

　　android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生産商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

　　a,button,input,textarea{

　　-webkit-tap-highlight-color: rgba(0,0,0,0)

　　-webkit-user-modify:read-write-plaintext-only;

　　}

　　-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元

　　另外，有些機型去除不了，如小米2

　　對于按鈕類還有個辦法，不使用a或者input标簽，直接用div标簽

　　15、winphone系統a、input标簽被點選時産生的半透明灰色背景怎麼去掉

　　16、webkit表單元素的預設外觀怎麼重置

　　.css{-webkit-appearance:none;}

　　17、webkit表單輸入框placeholder的顔色值能改變麼

　　input::-webkit-input-placeholder{color:#AAAAAA;}

　　input:focus::-webkit-input-placeholder{color:#EEEEEE;}

　　18、webkit表單輸入框placeholder的文字能換行麼

　　ios可以，android不行~

　　19. 關閉iOS鍵盤首字母自動大寫

　　在iOS中，預設情況下鍵盤是開啟首字母大寫的功能的，如果啟用這個功能，可以這樣：

　　20. 關閉iOS輸入自動修正

　　和英文輸入預設自動首字母大寫那樣，IOS還做了一個功能，預設輸入法會開啟自動修正輸入内容，這樣的話，使用者經常要操作兩次。如果不希望開啟此功能，我們可以通過input标簽屬性來關閉掉：

　　21. 禁止文本縮放

　　當移動裝置橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

　　html {

　　-webkit-text-size-adjust: 100%;

　　}

　　需要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設定 `meta viewport’。

　　22. 移動端如何清除輸入框内陰影

　　在iOS上，輸入框預設有内部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

　　input,

　　textarea {

　　border: 0;

　　-webkit-appearance: none;

　　}

　　23.螢幕旋轉的事件和樣式

　　window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式;

　　window.onorientationchange = function(){

　　switch(window.orientation){

　　case -90:

　　case 90:

　　alert("橫屏:" + window.orientation);

　　case 0:

　　case 180:

　　alert("豎屏:" + window.orientation);

　　break;

　　}

　　}

　　樣式

　　//豎屏時使用的樣式

　　@media all and (orientation:portrait) {

　　.css{}

　　}

　　//橫屏時使用的樣式

　　@media all and (orientation:landscape) {

　　.css{}

　　}

　　24.audio元素和video元素在ios和andriod中無法自動播放

　　應對方案：觸屏即播

　　$('html').one('touchstart',function(){

　　audio.play()

　　})

　　25.搖一搖功能

　　HTML5 deviceMotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。

　　26.手機拍照和上傳圖檔

　　的accept 屬性

　　使用總結：

　　ios 有拍照、錄像、選取本地圖檔功能

　　部分android隻有選取本地圖檔功能

　　winphone不支援

　　input控件預設外觀醜陋

　　27. 消除transition閃屏

　　.css{

　　-webkit-transform-style: preserve-3d;

　　-webkit-backface-visibility: hidden;

　　}

　　開啟硬體加速

　　解決頁面閃白

　　保證動畫流暢

　　.css {

　　-webkit-transform: translate3d(0, 0, 0);

　　-moz-transform: translate3d(0, 0, 0);

　　-ms-transform: translate3d(0, 0, 0);

　　transform: translate3d(0, 0, 0);

　　}

　　設計高性能CSS3動畫的幾個要素

　　盡可能地使用合成屬性transform和opacity來設計CSS3動畫，

　　不使用position的left和top來定位

　　利用translate3D開啟GPU加速

　　28. android 上去掉語音輸入按鈕

　　input::-webkit-input-speech-button {display: none}

　　29.模拟按鈕hover效果

　　移動端觸摸按鈕的效果，可明示使用者有些事情正要發生，是一個比較好體驗，但是移動裝置中并沒有滑鼠指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下，

　　按鈕

　　架構

　　1. 移動端基礎架構

　　zepto.js 文法與jquery幾乎一樣，會jquery基本會zepto~

　　iscroll.js 解決頁面不支援彈性滾動，不支援fixed引起的問題~ 實作下拉重新整理，滑屏，縮放等功能~

　　underscore.js 該庫提供了一整套函數式程式設計的實用功能，但是沒有擴充任何JavaScript内置對象。

　　fastclick 加快移動端點選響應時間

　　animate.css CSS3動畫效果庫

　　Normalize.css Normalize.css是一種現代的、CSS reset為HTML5準備的優質替代方案

　　2. 滑屏架構

　　适合上下滑屏、左右滑屏等滑屏切換頁面的效果

　　slip.js

　　iSlider.js

　　fullpage.js

　　swiper

　　3.瀑布流架構

　　masonry

　　工具推薦

　　caniuse 各浏覽器支援html5屬性查詢

　　paletton 調色搭配

學習Web前端開發最基礎的東西從這裡開始，果子老師在web前端交流學習群018歡迎你！

轉載于:https://my.oschina.net/u/3388416/blog/891162