认识达内从这里开始

这里可以分三个时期

A.设计初期。先审视设计稿，因为320派系的原因，大部分设计稿只考虑到IPHONE5来设计，因此很多背景元素是只有320px宽度(页面实际渲染宽度)。

那么，这时候就需要设计提供一个较长的延伸背景了，最好是可以重复的，用background-repeat可以减少图片大小。

B.设计中期。也就是具体的兼容方法，可以使用CSS3 Media Query和类覆盖。

1.CSS3 Media Query，按范围兼容机型。

/*iphone6*/

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio : 2)

{

.page6 .ele-building{top: 69px;}

.page6 .ele-runner{top: 100px;}

.page6 .ele-pophome{top: 16px;}

}

2.类覆盖，这种方式适合直接为小屏或大屏做整体兼容。

首先，为小屏(大屏)加一个识别类，这里小于420表示为小屏幕(IPHONE4有上下导航栏)：

var bh = $(window).height();

// 480 - 64 = 416 iphone4

if(bh<420){

$('body').addClass('low-screen');

}

然后，对应识别类加上要变动的元素覆盖，例如：

.page6 .ele-bg{top: 10px;}

.low-screen .page6 .ele-bg{top: 0px;}

C.设计后期。这是最后一步，整体检查和体验，这里面会暴露一些问题，例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了，可以来最后大招解决：

1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素，实测失真根本看不出来，设计师也满意(毕竟不用多做一张图!);

2.小屏适当去掉一些元素，例如一些翻页提示，一些多余图标，可以让优雅降级，把它们 display:none掉。

有以上几步，基本就能兼容大部分机器了。兼容一直是个苦活，但是这是前端必修课，多练就会发觉其实也没有那么难嘛。

(4)交互提示

前面说了，加了音效就要加上音乐切换开关的按钮，不然会被用户骂死。还有其他，例如如果你的页面不能兼容横屏，请监听横屏状态，然后加上适当的横屏提示。

例如：

// 横屏监听

var updateOrientation = function(){

if(window.orientation=='-90' || window.orientation=='90'){

$('.landscape-wrap').removeClass('hide');

console.log('为了更好的体验，请将手机/平板竖过来!');

}else{

$('.landscape-wrap').addClass('hide');

console.log('竖屏状态');

}

};

window.onorientationchange = updateOrientation;

提示越多，界面越友好，有时候设计师会漏掉一些可能出现的页面情况。

作为有态度的前端，请好好把关，让用户有好的体验。

(5)分享接口

H5做好了，要传播分享才能展示你的牛逼轰轰。

然而分享其实是个坑，分享到微信、手Q等都有各种问题。

C.一般化分享

在默认兼容旧版微信、手Q或者各种浏览器，平台，可以用这样的方法：

写h1做标题，p做内容，img做缩略图，只需要把h1隐藏掉就好，这里的缩略图最好要大于200x200px。

分享的坑还有更多，例如不同浏览器例如QQ浏览器、Chrome也会有自己的默认拉取方式(部分截图作缩略图)，需要多加测试优化。

本文章由潍坊IT培训小编摘自UI中国网，此文略有改动。