ios Andrews

H5 page fit all six skills iPhone and Android models

 

Currently, many small designers APP partners have begun to shift H5 front-end development matter, but to solve all models of iPhone and Android adaptation problem is our top priority. Whether or write front-end design APP H5. Are to consider the compatibility of the mobile side.

25 school with you today to review the H5 page to fit all iPhone and some tips and ways Andrews models.

Return to the topic, the best way to iphone compatible version of each model is adaptive.

1, viewport simple and crude way:

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

Directly viewport 320px 1.3 times, and 1.3 times the page magnification.

Why 1.3?

At present most of the pages are referenced layout to 320px, and the width ratio iphone6 is 375/320 = 1.171875, iphone6 + is 414/320 = 1.29375 so it is approximately equal to 1.29 times the 1.3.
2, ip6 + of CSS media query

@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){
/ * More * iphone 6 /
}

PS: can directly use the actual device-width: The device-width : 375px

On the basis of the original page, and then do the writing style to suit the most appropriate screen size alone.
3, REM layout

CSS3 REM is a new unit, and the high end of the mobile support, android2.x +, ios5 + support. REM is relative to the root element dom to set the size of the structure, i.e. the html element. Compared to the em unit is easier to understand and use the rem use.

REM and PX conversion can check the URL:  https://offroadcode.com/prototypes/rem-calculator/

Assumptions, html we set the font-size: 12px; that is 12px relative to 1rem, then 18px is 18/12 = 1.5rem.

So we have to design the layout of 320px as a reference to the html font-size: 100px, namely 100px = 1rem. (100px is set for the convenience of calculation) you can be most px units can be divided by 100 rem directly into the unit.

How do REM responsive layout?

1, if only the adapter ip6 + device, using a media query on the line.

Pseudo-code as follows:

/ * 320px layout * /
html{font-size: 100px;}
{body font-size: 0 .14rem / * Actual equivalent 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;}
}
/ * More * iPhone6 ​​/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
html{font-size: 129.375px;}
}

Thus, in IP6, it will page elements magnified 1.17 times, ip6 + is amplified at 1.29 times.

2, if it is fully adaptive, it can be controlled by JS.

( function (doc, win) {
var = Docela 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);

Initial page when computing font-size, and then bind the resize event. This effect is the same as the layout and percentage.

So do percentages units and units with REM to do What are the advantages?

The main advantage lies in its ability to better control the element size. (Typically used in the percentage distribution layer typically common set to 50%, 33.3% integer, like in the majority 25%, it is difficult to use in complex page widgets). But compared to the percentage of the layout, it needs to achieve JS or media query, a slight defect.

DEMO Institute Add

id="cp_embed_Jojaqw" src="http://codepen.io/baofen14787/embed/Jojaqw?height=268&theme-id=10019&slug-hash=Jojaqw&default-tab=result&user=baofen14787" scrolling="no" frameborder="0" height="268" title="CodePen Embed" class="cp_embed_iframe" style="width:568px;overflow:hidden;">

4, adaptive picture

REM has just finished the layout, then the percentage layout can achieve the same effect, but as a percentage layout, we must face a problem: the image width to 100%, will be highly problematic collapsed when the page loads. .

Figure: page picture height when loading the default does not exist.

It can be provided with padding-top to achieve adaptive percentage value.

Formula is as follows:

padding-top = (Image Height / Image Width) * 100%

Principle: When the percentage is padding-top, The values ​​are relative to the width.

Implement the relevant code:

<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%;}

DEMO地址，缩放浏览器窗口看看。

id="cp_embed_vEYzgv" src="http://codepen.io/baofen14787/embed/vEYzgv?height=268&theme-id=0&slug-hash=vEYzgv&default-tab=result&user=baofen14787" scrolling="no" frameborder="0" height="268" title="CodePen Embed" class="cp_embed_iframe" style="width:568px;overflow:hidden;">

5、图片高清化

大家都知道，iphone6 plus 是3倍高清图了，它的devicePixelRatio = 3。

关于DPR的介绍可以查看这篇文章《 设备像素比devicePixelRatio简单介绍 》

在ios8下，已经开始支持img的 srcset 属性了（目前移动端也就ios8开始支持），也就是说，可以对一张图片设置2个URL，浏览器自动加载对应的图片。

支持程度如下：

黄色表示仅支持旧的srcset规范，绿色表示支持全新的srcset规范，包括sizes属性，w描述符。 这里不展开，详细了解可自行google。

如下DEMO，请切换devicePixelRatio值进行查看：

不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。

6、背景图高清化

media query 实现高清化

img标签的高清化，可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片，但是对于背景图，写在CSS中的，用JS来判断就略麻烦了，还好CSS通过media query也能判断dpr。

目前兼容性最好的背景图高清化实现方式，使用media query的 -webkit-min-device-pixel-ratio 做判断：

/* 普通显示屏(设备像素比例小于等于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);
}
}

进一步，可以通过工具生成相应的3x，2x，1x的图片及css，在使用时直接引用即可。谁搞一个？

关于移动设备的 -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：好智能的样子）

However, as compared to media query implementation, image-set supports only a single high-definition pictures, not suitable for use in css sprite. And compatibility is also a major mishap.

In general, for use in LOGO area, area under a single picture icon, it is also a good choice.

About adaptation picture list, that is, to make the layout more flexible, in which electricity supplier site, the Product List is a very common structure. Listing a more intelligent way: justification, pitch adaptation.

It may be used to achieve justification FLEXBOX layout effect, it may also be used  text-align:justify the way of implementation.