Web フロントエンド開発 - モバイル ページ開発リソースの概要_html/css_WEB-ITnose

私は仕事中に多くの問題やバグの解決策に遭遇したので、後で使用できるように記録しました。 ！ ！内容は網羅的ではありませんが、今後問題が発生するたびにここにまとめてみんなに共有します！

1.

meta タグに関する知識

1

モバイル ページのビューポートの幅をデバイスの幅と同じに設定し、ズームを禁止します。

2

. モバイル ページのビューポート幅を固定幅 (640px など) に設定し、WeChat ブラウザー ページでよく使用されます。

3

、ページ上の数字を電話番号として認識することは禁止されています

4

、無視Android プラットフォーム 電子メール アドレスの認識

5

、Web サイトがホーム画面のクイック起動モードに追加されると、アドレスバーは非表示にできます。iossafariの場合のみ

6

、ios の safari のみ、ホーム画面に Web サイトを追加するクイック起動方法上部ステータスバーのスタイル

ビューポート

テンプレート

コンテンツ...

2、

CSS スタイルのヒント 1

、iosおよびandroidユーザーが選択したテキスト .cs s{-webkit-user-select:none }

2

、禁止ios長押し時にシステムメニューを起動し、長押し時に画像のダウンロードを禁止ios&android .css{-webkit-touch-callout: none}

3

、wwebkitフォーム要素のデフォルトスタイルのデフォルトスタイルをremoveするcss{-webkit-acpearance：none;} プレースホルダー

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

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

5 ,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

, 携帯端末定義フォント, 携帯端末には Microsoft Yahei フォントがありません

/* 携帯端末定義フォントのコード*/ body{font-family :Helvetica;} 3. その他のヒント

1

、携帯電話で写真を撮り、写真をアップロードしてください

2

、キャンセルinput

ios

次に、入力時の英語のイニシャルの大文字化のデフォルトは

3、電話をかけたりテキストメッセージを送信したりするメッセージ 電話:0755-10086 テキストの送信先: 10086 Four、 CSSリセット

/* hcysun */

@charset "utf-8"; /* replace */

html{

-webkit-text-size-adjust:none ;

-webkit-user -select:none;

-webkit-touch-callout: none font-family: Helvetica;

}

body{font-size:12px;}

body,h1, h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{マージン:0; フォントの太さ:標準;テキスト-インデント: 0;}

a,button,input,textarea,select{ 背景: なし; -webkit-tap-highlight-color:rgba(255,0,0,0); none;}

em{ font-style:normal}

li{list-style:none}

a{text-decoration:none;}

img{border:none;}

table{border-collapse: Collapse;}

textarea{size:none; overflow:auto;}

/* end restart */

5. よく使われる public

CSS スタイル

/* public * /

/* float をクリアします* /

.clear {zoom:1; }

.clear:after { content:''; }

/* としてボックス モデルを定義します。奇妙な合計モデル (幅と高さは border の影響を受けません) */

.boxSiz{

-webkit-box-sizing: border-box; -moz-box-sizing: border-box;

-ms-box-sizing: border-box;

- o-box-sizing: border-box;

box-sizing: border-box;

}

/* 強制改行*/

.toWrap {

word-break: Break-all; /* 英語作品のみ、文字を改行として使用します。 */

Word-wrap:break-word; /* 改行の基礎として単語を使用し、英語でのみ機能します。 */

white-space: pre-wrap; /* 中国語でのみ機能し、強制的に改行されます。 */

}

/* 改行を禁止*/

.noWrap{

white-space:nowrap;

}

/* 省略記号を越えた改行を禁止*/

.noWrapEllipsis{

white - space :nowrap; overflow:hidden; text-overflow:ellipsis;

}

/* テキストの両端を揃えます*/

.text-justify{

text-align:justify;

text-justify:inter -ideograph ;

}

/* ボックス モデルをフレックス レイアウトと互換性があるように定義し、コンテンツを水平方向と垂直方向に中央揃えにします*/

.flex-center{

display: -webkit-box;

display: -moz -box;

ディスプレイ: -ms-flexbox;

ディスプレイ: -o-box;

ディスプレイ: box;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms- flex-pack: センター;

-o-box-pack: センター;

box-pack: センター;

-webkit-box-align: center;

-moz-box-align: center ;

-ms-flex-align: center;

-o-box-align: center;

box-align: center;

}

/* public end */

Six、flexレイアウト

1、フレキシブルボックスモデル互換の記述方法を定義します

/*

box

*/

display: -webkit-box;

display: -mo z-box;

display: -ms-flexbox;

display: -o-box;

display: box;

2, box-orient ボックスモデル内のフレックス項目のレイアウト方向を定義します

/**

* 垂直列垂直

* 水平行水平デフォルト値

*/

-webkit-box-orient: 水平;

-moz-box-orient: 水平;

-ms-flex-direction: row;

-o-box-orient : 水平;

ボックス方向: 水平;

3, ボックス方向ボックスモデル内の伸縮項目の通常の順序を定義します(通常デフォルト値),フラッシュバック (リバース)

/* Firefox */

display:-moz-box;

-moz-box-direction:reverse;

/* Safari、Opera、Chrome */

display:- webkit-box ;

-webkit-box-direction:reverse;

4, box-pack ボックスレベルスペースの管理

/*

start

end

センター

*/

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-o-box-pack: center;

box-pack: center;

5, box-pack ボックスの垂直方向の十分なスペースの管理

/*

start

end

center

* /

/* box-align */

-webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-o-box-align : center;

box-align: center;

6、スケーラブルなプロジェクトの特定の場所を定義します

/*-moz-box-ordinal-group:1;*/ /* Firefox */

/*-webkit-box-ordinal-group:1;*/ /* Safari および Chrome */

.box div:nth-of-type(1){-webkit-box-ordinal-group:1;}

.box div: nth-of-type(2){-webkit-box-ordinal-group:2;}

.box div:nth-of-type(3){-webkit-box-ordinal-group :3;}

.box div:nth-of-type(4){-webkit-box-ordinal-group:4;}

.box div:nth-of-type(5){-webkit-box -ordinal-group:5 ;}

7、フレックス項目が占めるスペースの割合を定義します

-moz-box-flex:2.0 /* Firefox */

-webkit-box-flex; :2.0; /* Safari と Chrome */

.box div:nth-of-type(1){-webkit-box-flex:1;}

.box div:nth-of-type(2) ){-webkit-box-flex :2;}

.box div:nth-of-type(3){-webkit-box-flex:3;}

.box div:nth-of-type(4) ){-webkit-box-flex :4;}

.box div:nth-of-type(5){-webkit-box-flex:5;}