手機端、移動端開發注意事項:

來源:互聯網
上載者:User

標籤:time   狀態   doc   asc   device   ios   表示   api   android中   

1、meta 標籤使用
      <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">
      第1個meta標籤表示:強制讓文檔的寬度與裝置的寬度保持1:1,並且文檔最大的寬度比例是1.0,且不允許使用者點擊螢幕放大瀏覽;

      第2個meta標籤是iphone裝置中的safari私人meta標籤,它表示:允許全螢幕模式瀏覽;

      第3個meta標籤也是iphone的私人標籤,它指定的iphone中safari頂端的狀態條的樣式;

      第4個meta標籤表示:告訴裝置忽略將頁面中的數字識別為電話號碼

2、盡量使用H5標籤
3、盡量使用display:inline-block;代替float屬性
4、塊級化a標籤,因為在觸控手機上,為提升使用者體驗,儘可能的保證使用者的可點擊地區較大。
5、調適型配置。寬度不要寫死
6、學會使用webkit-box
7、如何去除Android平台中對郵箱地址的識別?
      <meta content="email=no" name="format-detection" />
8、如何去除iOS和Android中的輸入URL的控制列

你的老闆或者PD或者互動設計師可能會要求你:能否讓我們的webapp更加像nativeapp,我不想讓使用者看見那個輸入url的控制列?

答案是可以做到的。我們可以利用一句簡單的javascript代碼來實現這個效果

setTimeout(scrollTo,0,0,0);

請注意,這句代碼必須放在window.onload裡才能夠正常的工作,而且你的當前文檔的內容高度必須是高於視窗的高度時,這句代碼才能有效執行。
9、如何關閉iOS中鍵盤自動大寫

我們知道在iOS中,當虛擬鍵盤彈出時,預設情況下鍵盤是開啟首字母大寫的功能的,根據某些業務情境,可能我們需要關閉這個功能,移動版本webkit為input元素提供了autocapitalize屬性,通過指定autocapitalize=”off”來關閉鍵盤預設首字母大寫。
10、iOS中如何禁止使用者選中文字
我們通過指定文字標籤的-webkit-user-select屬性為none便可以禁止iOS使用者選中文字。
11、iOS中如何擷取捲軸的值

案頭瀏覽器中想要擷取捲軸的值是通過document.scrollTop和document.scrollLeft得到的,但在iOS中你會發現這兩個屬性是未定義的,為什麼呢?因為在iOS中沒有捲軸的概念,在Android中通過這兩個屬性可以正常擷取到捲軸的值,那麼在iOS中我們該如何擷取捲軸的值呢?

通過window.scrollY和window.scrollX我們可以得到當前視窗的y軸和x軸捲軸的值
12、如何解決盒子邊框溢出

當你指定了一個區塊層級元素時,並且為其定義了邊框,設定了其寬度為100%。在行動裝置開發過程中我們通常會對文字框定義為寬度100%,將其定義為區塊層級元素以實現全屏自適應的樣式,但此時你會發現,該元素的邊框(左右)各1個像素會溢了文檔,導致出現橫向捲軸,為解決這一問題,我們可以為其添加一個特殊的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。

手機端、移動端開發注意事項:

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.