H5 ページをすべての iPhone および Android モデルに適応させるための 6 つのヒント_html/css_WEB-ITnose

現在、多くの APP デザイナーが H5 フロントエンド開発に目を向け始めていますが、すべての iPhone および Android モデルへの適応問題を解決することが私たちの最優先事項です。 APP を設計している場合でも、フロントエンド H5 を作成している場合でも、モバイル互換性を考慮する必要があります。

25 今日の学校では、H5 ページをすべての iPhone および Android モデルに適応させるためのヒントと方法を学習します。

本題に戻りますが、iPhone のすべてのバージョンと互換性を持たせる最善の方法は、適応することです。

1. ビューポート 単純かつ大雑把な方法:

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

ビューポートを 320px の 1.3 倍に直接設定し、ページを 1.3 倍に拡大します。

なぜ 1.3 なのか?

現在、ほとんどのページは 320px レイアウトに基づいており、iPhone6 の横幅比は 375/320 = 1.171875、iPhone6+ は 414/320 = 1.29375 であるため、1.29 倍はほぼ同じです1.3.

2. ip6+ の CSS メディア クエリ

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){  /*iphone 6*/}@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){  /*iphone 6 plus*/}

PS: 実際のデバイス幅を直接使用することもできます: device-width: 375px

元のページを基に、対応する画面サイズに合わせて別のスタイルを記述します。

3. REM レイアウト

REM は CSS3 の新しいユニットであり、モバイルサポートが高く、android2.x+ と ios5+ の両方がサポートしています。 REM は、dom 構造のルート要素 (html 要素) に相対的なサイズを設定します。 em ユニットと比較して、rem は理解しやすく使いやすいです。

REM と PX 間の変換については、次の URL を参照してください: https://offroadcode.com/prototypes/rem-calculator/

HTML の場合、font-size を設定するとします。 :12px; つまり、1rem に対して 12px である場合、18px は 18/12 = 1.5rem となります。

次に、320px のデザイン レイアウトをベンチマークとして使用し、HTML を font-size: 100px、つまり 100px = 1rem に設定します。 (計算を容易にするために 100px に設定されています) 次に、ほとんどの px 単位を 100 で割って、rem 単位に直接変更できます。

REM はどのようにレスポンシブ レイアウトを実行しますか?

1. ip6+ デバイスにのみ適応する必要がある場合は、メディア クエリを使用します。

擬似コードは次のとおりです。

/*320px布局*/html{font-size: 100px;}body{font-size: 0.14rem /*实际相当于14px*/}/* iphone 6 */@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){    html{font-size: 117.1875px;}}/* iphone6 plus */@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){    html{font-size: 129.375px;}}

このように、ip6 ではページ内の要素が 1.17 倍に拡大され、ip6+ では 1.29 倍に拡大されます。 。

2. 完全に適応可能な場合は、JS を通じて制御できます。

(function (doc, win) {  var docEl = doc.documentElement,    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    recalc = function () {      var clientWidth = docEl.clientWidth;      if (!clientWidth) return;      docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';    };  // Abort if browser does not support addEventListener  if (!doc.addEventListener) return;  win.addEventListener(resizeEvt, recalc, false);  doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

ページの初期化時にフォント サイズを計算し、サイズ変更イベントをバインドします。この効果はパーセント レイアウトと同じです。

それでは、パーセンテージを単位として使用する場合と比較して、REM を単位として使用する場合の利点は何でしょうか?

主な利点は、要素のサイズをより適切に制御できることです。 (通常、パーセンテージはレイアウト レイヤーに適用され、一般的な設定は 50%、33.3%、25% などの整数がほとんどですが、複雑なページ ウィジェットでは使用が困難です)。ただし、パーセンテージ レイアウトと比較すると、JS またはメディア クエリで実装する必要があり、少し欠陥があります。

4. 画像アダプティブ

REM レイアウトについての説明は終わりました。パーセント レイアウトを使用しても同じ効果が得られますが、パーセント レイアウトを使用すると、画像の幅が 100 になるという問題に直面する必要があります。 %、ページの読み込み中に高度な折りたたみの問題が発生します。 .

図に示すように、ページが読み込まれるとき、デフォルトでは画像の高さは存在しません。

次に、padding-top を使用して、適応を達成するためのパーセンテージ値を設定できます。

式は次のとおりです:

padding-top = (画像の高さ / 画像の幅) * 100%

原則: padding-top の値がパーセンテージの場合、値は幅に対する相対値です。

関連コードの実装:

<div class="cover">    <img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" alt=""/></div>

.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}.cover img{position: absolute; top: 0; width: 100%;}

5. 高解像度の写真

ご存知のとおり、iPhone6 plus は 3 倍の高解像度を持っています。画像とそのデバイスPixelRatio = 3。

DPR の概要については、この記事「デバイスのピクセル比 devicePixelRatio の簡単な紹介」を参照してください。

ios8 では、img の srcset 属性がサポートされています (現在、ios8 のみがサポートしています)つまり、1 つの画像に対して 2 つの URL を設定でき、ブラウザは対応する画像を自動的にロードします。

黄色は古い srcset 仕様のみがサポートされていることを示し、緑色は、size 属性と w 記述子を含む新しい srcset 仕様がサポートされていることを示します。 ここでは詳細には触れませんが、詳しくは Google で調べてください。

DEMO は次のとおりです。devicePixelRatio 値を切り替えて表示してください:

ただし、現在のフロントエンドの画像の実装は、基本的には遅延ロードを使用して実装されています。 srcset の画像読み込み方法は、実際のプロジェクトでは比較的まれに使用されます。

6. 高解像度の背景画像

メディアクエリは高解像度を実現します。 JS を使用して devicePixelRatio の値を決定できます。異なるサイズの画像を読み込みますが、CSSで記述された背景画像の場合、JSを使用して判断するのは少し面倒です。幸いなことに、CSSはメディアクエリを通じてdprを判断することもできます。

現時点で、高解像度の背景画像を実装する最も互換性のある方法は、メディア クエリの -webkit-min-device-pixel-ratio を使用して判断します。

さらに、対応する 3x、2x、1x の画像と CSS を生成し、使用するときに直接引用するだけのツールを使用できます。誰が作るの？

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */  .css{      background-image: url(img_1x.png);  }  /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */  @media only screen and (-webkit-min-device-pixel-ratio:2){      .css{    background-image: url(img_2x.png);      }  }  /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */  @media only screen and (-webkit-min-device-pixel-ratio:3){      .css{    background-image: url(img_3x.png);      }  }

モバイル デバイスの -webkit-min-device-pixel-ratio 値については、このページの配置を参照できます: http://bjango.com/articles/min-device-pixel-ratio/

image-set 实现高清化

image-set，它是Webkit的私有属性，也是Css4的一个属性，它是为了解决Retina屏幕下的图像显示而生。

使用方式也很简单。伪代码如下：

.css {      background-image: url(1x.png);    /*不支持image-set的情况下显示*/      background: -webkit-image-set(        url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */        url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */        url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */      );  }

目前移动端的支持程度来看，ios7+，android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案。 image-set 也是一种实现方案。

使用image-set 与 media query 实现有什么区别及好处？

这篇文章里面做了很详细的阐述，大家可以看看： http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

大体的意思是：image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。这就意味着，如果在低网速下，浏览器可以选择加载低分辨率的图片。（PS：好智能的样子）

但是相比如media query的实现，image-set仅支持单个图片的高清化，不适合在css sprite下使用。 并且兼容性也是一大硬伤。

一般来说，用在LOGO区域，单个图片图标的区域下，也是个不错的选择。

关于图片列表适配，也就是要让布局更灵活，在电商网站里面，商品列表是一个非常常见的结构。 一种比较智能的列表方式是：两端对齐，间距自适应。

那么可以使用FLEXBOX布局来实现两端对齐的效果，也可以使用 text-align:justify 的方式实现。

具体实现办法： http://www.ghugo.com/inline-block-justify/

以上内容是非常适合想要学习H5页面的童鞋们，算是H5页面开发的入门教程。