手機/移動前端開發須要注意的20個要點

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 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" />

 

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；

第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

第五個meta標籤表示：告訴安卓設備忽略將頁面中的郵件地址爲連接

 

 

如何去除iOS和Android中的輸入URL的控件條

你的老闆或者PD或者交互設計師可能會要求你：可否讓咱們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控件條？

答案是能夠作到的。咱們能夠利用一句簡單的javascript代碼來實現這個效果

setTimeout(scrollTo,0,0,0);

請注意，這句代碼必須放在window.onload裏纔可以正常的工做，並且你的當前文檔的內容高度必須是高於窗口的高度時，這句代碼纔能有效的執行。

如何解決盒子邊框溢出

當你指定了一個塊級元素時，而且爲其定義了邊框，設置了其寬度爲100％。在移動設備開發過程當中咱們一般會對文本框定義爲寬度100％，將其定義爲塊級元 素以實現全屏自適應的樣式，但此時你會發現，該元素的邊框(左右)各1個像素會溢了文檔，致使出現橫向滾動條，爲解決這一問題，咱們能夠爲其添加一個特殊 的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度