モバイルプロジェクト
モバイルブラウザとカーネルの分析
モバイルブラウザの種類：
UCブラウザ、QQブラウザ、Oppenブラウザ、Baiduモバイルブラウザ、360セキュリティブラウザ、Googleブラウザ、Sogouモバイルブラウザ、Cheetahブラウザ、その他のブランドブラウザ。
UC、QQ、Baiduなどの国内モバイルブラウザはすべてWebkitに基づいて変更されたカーネルであり、国内の携帯電話のオペレーティングシステムがAndroidに基づいて変更されているように、中国には自社開発のカーネルはありません。
ビューポート
width：ビューポートの幅（つまり、前述のブラウザの幅）を設定します。これは、整数または文字列のdevice-widthにすることができます。
initial-scale：ページの初期スケール値。数値であり、小数でもかまいません。
最小スケール：ユーザーが許可する最小ズーム値。これは数値であり、小数でもかまいません。
maximum-scale：ユーザーが許可する最大ズーム値。数値であり、小数でもかまいません。
height：ビューポートの高さを設定します（通常は使用しません）。
user-scalable：ユーザーにズームを許可するかどうか、「no」は許可されません。「yes」は、このラベルを頭に設定できるようにすることです。
モバイルレイアウトソリューション
固定レイアウト
PC側と同じように、<head>にビューポートを追加します。ウェブページ全体の幅が中央で750pxで、余分な部分が空白のままになっていると想像してください。
利点：アイデアは、使い始めるのが簡単なPC端末を使用することです。
短所：大画面携帯電話や携帯電話が横画面の場合、両側に大きな余白があり、大画面携帯電話の下ではページが非常に小さく見え、操作するボタンも非常に小さいため、貧弱なユーザーエクスペリエンス。
フローレイアウト
モバイルレイアウトの焦点は、従来のpxの代わりにパーセンテージを使用することですが、高さはほとんどpxで固定されているため、表示効果は、大画面の携帯電話の下で一部のページ要素の幅が非常に長く引き伸ばされるようになります。ただし、高さは以前と同じです。長所は、フローレイアウトが自己適応型のニーズを十分に解決できることです。短所は、多数のパーセンテージレイアウトを使用すると、互換性の問題が発生し、水平方向に適していることです。引き伸ばされたデザイン要素。デザインには多くの制限があります。
レスポンシブアプローチ
ターゲットユーザーのアクセスデバイスの主なタイプに応じて、3つまたは4つのレイアウトを作成します。
各レイアウトには間隔があり、メディアクエリ@mediaを使用でき、さまざまな解像度のデバイスにさまざまなスタイルをロードできます。このメソッドの利点は、表示効果を比較的正確に制御できることですが、同じクラスに異なるスタイルを記述する必要がある場合があります。これにより、コードがより複雑になり、後で保守するのが困難になります。
レムレイアウト
Remは、ルート要素を基準にしたフォントサイズの単位を指します。つまり、サイズはhtml要素のフォントサイズに基づいて計算されます。たとえば、htmlのフォントサイズが100pxで、divの幅が1remの場合、divの幅は100pxです。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"><script>
function auto() {
//获取html宽度（设备宽度）
var deviceWidth = document.documentElement.clientWidth;
// 720可以根据实际设计宽度进行修改
if (deviceWidth > 720) {
deviceWidth = 720;
}
var fs = (deviceWidth * 100) / 720;
document.documentElement.style.fontSize = fs + "px";
}
window.onresize = function () {
auto();
}
</script>
vw + vh
vwは、ビューポートの幅の略語であり、CSS3仕様のビューポート単位です。ビューポートの幅に対して、ビューポートは100単位に均等に分割されます。
ビューポートの高さを基準にして、ビューポートは100単位のvhに均等に分割されます。
750pxデザインドラフト750px = 100vw 1px = 0.1333333vw;
remを使用する場合、デフォルトの1rem = 100px 100pxは13.333333vwであるため、vmとremを変換できます。
メディア
@media (max-width: 768px) {
.banner {
margin-top: 44px;
background-color: blue;
height: 2.88rem;
width: 100%;
}
}
orientation: portrait;/*锁定为纵向*/
orientation: landscape;/* 锁定为横向*/
@media screen and (orientation: landscape) {
div {
width: 300px;
height: 300px;
background-color: red;
}
}
@media screen and (orientation: portrait) {
div {
width: 300px;
height: 300px;
background-color: blue;
}
}互換性の問題
小さなフォントの処理
ブラウザが異なれば、最小フォントも異なります。10pxのものと12pxのものがあります。
解決策：フォントを設定するときは、12px以上にする必要があります。12px未満にする必要がある場合は、
transform：scale（）でズームします。
モバイルでスタイルをリセット
1.ユーザーがテキストを選択することを禁止します。Androidは無効です（イベントの章で解決されました。長押しするとメニューが表示されます。タッチスタートをブロックした後はデフォルトを使用してください）
動作は修正されました）。
-webkit-user-select：なし;
2.長押しを禁止してシステムメニューをポップアップします
-webkit-touch-callout：なし;
3.androidでa / button / inputタグがクリックされたときに生成された境界線を削除し、iosの下のタグがクリックされたときに生成された半透明の灰色を削除します
色背景。
-webkit-tap-highlight-color：rgba（0,0,0,0）;
4.水平画面と垂直画面を切り替える場合、またはユーザーがブラウザー設定を使用してフォントサイズを変更できます（本文の下のすべての要素が必要です）。
-webkit-text-size-adjust：100％;
5.ボタンのiOSの下の角は丸みを帯びています。
-webkit-appearance：none; //ボタンと入力にはデフォルトの背景があります
border-radius：0; //入力にはデフォルトの丸い角があります