モバイル・エンドのレイアウトに関するFAQの概要

5137 ワード
css
縦横スクリーン制限の問題
name = "x5-orientation" content="portrait | landscape" />

x 5カーネルのみサポート
name = "screen-orientation" content="portrait" />

UCブラウザのみサポート
フルスクリーン制限の問題
name = "x5-fullscreen" content="true" />

x 5カーネルのみサポート
name = "full-screen" content="yes" />

UCブラウザのみサポート
電話番号とメールアドレスの識別は禁止されています
name = "format-detection" content="telephone=no,email=no" />

認識が禁止されると、ページ内のすべてのメールボックスや電話は認識されません.特別なニーズがあれば、コード実装に協力してください.
<a href="tel:110">   110a>
<a href="mailto:[email protected]">     [email protected]a>

リンクフォームボタンのデフォルトの背景を削除
-webkit-tap-highlight-color: rgba(0,0,0,0);

ボタンフィレットの削除
-webkit-appearance: none;

移動先フォント
  • iOSシステムデフォルト中国語フォントHeiti SCデフォルト英語フォントHelveticaデフォルトデジタルフォントHelveticaNeueマイクロソフトブラックなし
  • Androidシステムデフォルト中国語フォントはDroidsansfallbackデフォルト英語とデジタルフォントDroid Sansマイクロソフトブラックなし
  • winphoneシステムデフォルト中国語フォントはDengxian(方正等線体)デフォルト英語とデジタルフォントはSegoe無マイクロソフトブラックフォント
  • 結論各携帯電話システムには独自のデフォルトフォントがあり、マイクロソフトのブラックをサポートしていない.
    body{font-family:Helvetica;}

    ユーザーによるフォントサイズの設定を禁止
    -webkir-text-size-adjust:100%;

    コピー、テキストの選択を禁止
    -webkit-user-select:none;//

    フォント強化font boosting
    モバイル端末装置は,大量のフォントがユーザにはっきり見えるように自動的にフォントを拡大するが,容器の高さを指定すれば解決できる.
    p{max-height:999999px}

    オリジナルスクロールイベントの呼び出し
    -webkit-overflow-scrolling:touch;

    CSSアニメーションページフラッシュ、アニメーションカートン
    解決策:-できるだけ合成属性transformとopacityを使用してCSS 3アニメーションを設計し、positionのleftとtopを適用せずに位置決めする-CSS 3アニメーションを使用する場合はできるだけ3 D加速を利用して、アニメーションをスムーズにする.アニメーション中のアニメーションフラッシュはbackface-visibilityで隠すことができます
    -webkit-transform: tanslate3d(0,0,0);

    fixed位置決め欠陥
  • iOSではfixed要素の位置決めエラーが発生しやすく、ソフトキーボードがイジェクトされるとfixed要素の位置決めに影響します
  • Androidの下でfixedの表現はiOSより良くて、ソフトキーボードが弾き出す時、fixed要素の位置決め
    • に影響しません
  • iOSではposition:fixed
    • はサポートされていません
    ソリューション:iScrollプラグインでこの問題を解決できます.
    回転防止画面はフォントサイズの自動調整です
    -webkir-text-size-adjust:100%;

    スクロールバーを上下に引くとカートン
    body{-webkit-overflow-scrolling:touch;overflow-scrolling-touch;}
    力ボタン868.バイナリピッチC++bit set
    Webページをキャッシュしない解決策