浅谈h5移动端页面的适配问题
时间： 00:55:33
&&&& 阅读：46111
&&&& 评论：
&&&& 收藏：0
标签：一、前言
& & & & 昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为响应式很牛逼，尤其是在不懂前端的人眼中，一味的追求响应式布局，我觉得复杂的布局项目做响应式还不如做二套样式，因为响应式的样式混在一起真的维护起来是恨费劲的。可能我说的不对，但是发表 一点点自己的看法。说道这里就想说一下移动端的布局，有很多人就是想把手机端得程序兼容ipad，我就觉得这个很不可思议为什么要这么做得，命名手机端的和ipad的设计模式以及操作样式都不一样。为什么还要把它们弄做一起的，维护起来的比较麻烦。还不如做成两套样式或者ipad直接让pc来兼容。pc的设计方式和ipad还是比较接近的。如果非要用移动的样式稍加改成ipad，个人感觉这种方案极不好。不知道大家的看法如何？& & & & 接下来我就说一下布局方式吧，目前比较流行的布局方案就是百分表啦。貌似百分之九十以上得触屏版都是这么做得，这种做法可以说是不会出现什么大问题，但是也会有几个小的问题，例如屏幕大的手机和比屏幕小差距之大，尤其是在比价斤斤计较的设计面前你是无法说清楚的，她会一直问，为什么这两个手机的布局差距这么大呢？其实我想说，我他妈怎么跟你解释呢。。。此处省略1000个字。在就是布局起来也比较麻烦，真心麻烦。当然肯定有更好得方案拉，于似乎我就想出了一个比较好的解决方案，顶宽布局。
二、320定宽布局
& & & & 当时我也想了很多方法，但是一直没有好的解决方案，曾经看了,当时看完哇塞，这不是正式我想要的嘛。可是尝试了多次发现这个方法的兼容性有很大的问题。最后还是放弃拉。于是乎我就开始琢磨，怎么才能更好得兼容所有的机子呢。就想到了缩放，viewport不就干这个的嘛。二话不说就尝试一下viewport里面得一个属性initial-scale,思想很简单，在页面渲染的时候我计算一下手机的宽度，然后我在跟我顶宽布局的宽度一做比较。那么不就可以实现了自动缩放嘛。可是我尝试的结果是，日的，这个属性各个浏览器支持不好。其实我觉得如果这个属性大家都能统一的支持，那就是完美的解决方案拉。可是谁让我们是程序猿呢。只要靠自己吧，要不然jquery也不会诞生。我们就是要在一个个坑中走过来呀。
& & & & &接着就想到了scale哈哈，css3里面得缩放，不过后来发现用这个字体什么的会虚掉。所以想起了zoom属性，从这可以看出来我也是干过pc的，当时的ie6的清楚浮动有一种方式就需要加一个zoom为0，这个就不错嘛。话说回来了。这个在nativeapp里还是没有太大问题得。不过还是有一点小坑，就是计算margin以及scroll的时候就出来个缩放系数的问题。不过还好，只要你把常用的组件写好除以或者乘以这个缩放系数就可以搞定啦哈哈。这种方式就可以解决小伙伴们百分比布局的痛苦拉。尤其是不用去计算那些百分值多少百分值多少拉。废话不说啦，上代码，
1 &!DOCTYPE html&
&meta http-equiv="content-type" content="text/ charset=UTF-8"/&
&meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=no"/&
&title&GreatBoy&/title&
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
padding:0px;
font-family: "Arial";
font-size: 100%;
margin: 0px auto;
display: none;
width:<span style="background-color: #f5f5f5; color: #px;
margin: 0px auto;
position: relative;
/*-----css content start-----*/
width:<span style="background-color: #f5f5f5; color: #%;
display: block;
&div id="wrapper"&
&div class="nav"&&img src="/banner/75/mobile_app/24326_0.jpg"/&&/div&
&div id="container"&
&div id="user"&用户信息&span id="userinfo"&&/span&&/div&
(function() {
var scale = 1,
$wrapper = document.getElementById(‘wrapper‘),
$body = document.getElementsByTagName(‘body‘)[0],
windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase(),
setScale = function(scales) {
if ($wrapper.style.zoom === undefined) {
$wrapper.style.margin = ‘0px‘;
$wrapper.style.transformOrigin = ‘top left‘;
$wrapper.style.transform = ‘scale(‘ + scales + ‘)‘;
$wrapper.style.MozTransformOrigin = ‘top left‘;
$wrapper.style.MozTransform = ‘scale(‘ + scales + ‘)‘;
$wrapper.style.zoom =
$body.style.display = ‘block‘;
if (deviceAgent.match(/(iphone|ipod|android|windows\s*phone|symbianos)/)) {
if (window.localStorage && window.localStorage.getItem(‘scale_jumei‘)) {
scale = window.localStorage.getItem(‘scale_jumei‘);
scale = parseFloat(windowWidth / 320);
if (windowHeight & windowWidth) {
window.localStorage && window.localStorage.setItem(‘scale_jumei‘, scale);
//微信2.3版本的处理(2.3版本有一个bug就是获取宽度不准确)
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 1;
if ($wrapper) {
setScale(scale);
} catch (e) {
scale = parseFloat(windowWidth / 320);
if ($wrapper) {
setScale(scale);
89 &/html&
& & & & &上面代码很简单大家一看就懂。这种方式做一个简单的页面以及平时做些活动啥得是没问题的。也不需要在算百分比是多少啦，直接写死宽度320布局就好啦，先说一下我得布局方式，就是让设计做640的图片。然后我们布局按照320来做就好，图标什么的让设计出2x图或者3x图，也就是做2倍icon或者3倍icon。2倍的icon目前在6plus上面还是会有点虚得。所以可以选择3倍的icon，毕竟图标什么的也不是太大。说一下这种方法的缺点吧。缺点是有的浏览器不支持zoom属性，例如火狐，那就只能用scale了。还有一个缺点就是在计算某些元素的高度什么需要一个缩放系数的问题。毕竟有缩放的东西在里面。当然坑还是有解决方案的，下面就说一下我的顶宽布局最终解决方案。
三、顶宽布局之最终解决方案
& & & & &为了解决上面布局的坑，我就弄了一个终极的解决方案，这个方案目前肯定也有一定的坑，不过貌似不是很大，毕竟没有太多的人反馈。上面的方案也用了很久，目前没有特别大得问题，尤其是在我们app里面没有出现过重大事故。& & & & 接着说一下最终方案，就是通过font-size缩放，这需要用到一个rem的尺寸，大家没事网上一搜就知道了。这个1rem目前等于16px，那么我上面的320布局岂不是可以搭建成宽度为20rem的尺寸，然后我里面所有的元素都可以用rem来代替px。这样我不就可以通过在html上font-size进行缩放了嘛,其实就是这样做的就ok。这里有一个转换，就是要把css里面的px按照1rem = 16px的规则都替换成rem。这样就ok了。这个方案目前的缺点就是需要编译一下css样式和不允许你写内联样式，不允许写内联样式的主要原因是要不你html也得进行编译替换拉。目前我们得解决方案是在开发的时候我们还是按照320的布局方案来走。等发布到线上的时候做一个整体的gulp构建px替换成rem。于似乎就解决了大部分得问题。目前这个解决方案对我来说还是比较理想的。可能某些地方还有问题。不过也算一种尝试吧，有什么问题大家可以一起解决。好了上一个段代码& & & &&
1 &!DOCTYPE html&
&meta http-equiv="content-type" content="text/ charset=UTF-8"/&
&meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&meta name="format-detection" content="telephone=no"/&
&title&GreatBoy&/title&
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
padding:0px;
display: none;
width:10rem;
&div class="nav"&&img src="/banner/75/mobile_app/24326_0.jpg"/&&/div&
&div id="container"&
&div id="user"&用户信息&span id="userinfo"&&/span&&/div&
(function(win) {
var doc = win.document,
scale = 16,
$body = doc.getElementsByTagName(‘body‘)[0],
$html = doc.getElementsByTagName(‘html‘)[0],
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase();
if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {
if ( window.localStorage && window.localStorage.getItem(‘scale_greatboy‘) ) {
scale = window.localStorage.getItem(‘scale_greatboy‘);
scale = parseFloat(windowWidth * 16 / 320);
if (windowHeight & windowWidth) {
window.localStorage && window.localStorage.setItem(‘scale_greatboy‘, scale);
}catch(e){
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 16;
$html.style.fontSize = scale + ‘px‘;
$html.style.display = ‘block‘;
window.onresize = function(){
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerW
scale = parseFloat(windowWidth * 16 / 320);
$html.style.fontSize = scale + ‘px‘;
scale = parseFloat(windowWidth * 16 / 320);
$html.style.fontSize = scale + ‘px‘;
$html.style.display = ‘block‘;
$body.style.width = ‘20rem‘;
})(window);
70 &/html&
& & & & 总结一下，这个解决方案目前的缺点。1、css需要编译。2、动态计算的时候一定不要把js里的高度宽什么的写死，一定要动态获取。3、在不支持rem的浏览器上会有问题。 目前这也是我想到的最好得解决方案，由于技术水平比较低哈哈。所以代码质量不高，有什么问题大家可以一起交流讨论，如果上面代码大家有疑惑可以看一下线上的页面原代码，，对啦看淘宝的源代码，貌似淘宝的首页是用fontsize缩放解决的。不过没有看到他们是怎么计算的，有空研究一下。不过我觉得淘宝首页这个自己实现的滚动条还是比较牛，至少在我们公司领导是不允许这么实现的，因为小米3的android机子看了一眼还是会卡顿。。。。太晚了，要去睡觉啦，如果有错别字什么的大家见谅（语文功底比较差哈哈）。
& & & &&标签：
现在什么响应式，什么适配，记得当初的html5，为用不用他而感到发愁，而现在来说，简直火爆的不行啊，像内顶级前端公司切图网（），和电信、路虎、雪佛兰、多美滋等公司合作的项目上千例中，多数都应用到了html5
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！H5 video安卓默认点击不能全屏播放解决办法 - 推酷
H5 video安卓默认点击不能全屏播放解决办法
var fullscreen = function(elem) {
var prefix = 'webkit';
if ( elem[prefix + 'EnterFullScreen'] ) {
return prefix + 'EnterFullScreen';
} else if( elem[prefix + 'RequestFullScreen'] ) {
return prefix + 'RequestFullScreen';
function autoFullScrenn(v){
= navigator.userAgent.toLowerCase();
var Android = String(ua.match(/android/i)) == &android&;
// if(!Android)//非android系统不使用;
var fullscreenvideo = fullscreen(doc.createElement(&video&));
if(!fullscreen) {
alert(&不支持全屏模式&);
video.addEventListener(&webkitfullscreenchange&,function(e){
if(!doc.webkitIsFullScreen){//退出全屏暂停视频
this.pause();
// this.pause();
}, false);
video.addEventListener(&click&, function(){
this.play();
video[fullscreenvideo]();
}, false);
video.addEventListener('ended',function(){
doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
// autoFullScrenn(video_obj)
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致& & & & 移动端开发要考虑最多的就是兼容性的问题，android和ios的兼容，css3新增属性的兼容以及h5新增标签等使用问题。下面是一些小问题以及解决方案，仅供参考。
& & & & 【1】.关于样式的总结
& & & & 1.移动端开发页面会左右晃动，这时候我们需要给外层容器加上overflow-x：hidden。
& & & & &2.遮罩层下面的内容依然会滑动，这时候我们可以把所有相关事件都停掉，或者在该容器外面再套一层div，宽高设为全屏，当遮罩层出现时，让该div：overflow：hidden；关闭遮罩层时overflow：auto；
& & & & 3.当我们使用弹性盒子布局时，要想头尾固定，首先要注意必须使容器占满视窗高度，其次使用flex系数进行设置，但是要注意中间内容区必须设置overflow：scroll属性，使其可以出现滚动条。
& & & &4.input默认样式的问题。关于input很可能会出现andriod和ios的不兼容问题。我们要注意以下几点，可以进行尝试设置：
& & & & & &1&appearence: -webkit-appearence:-moz-appearence:
& & & & & &2&FILTER:alpha（opacity:0);
& & & & &&3&设置输入框背景色为透明：background-color:
& & & &5.关于button/a/input点击之后出现的半透明背景的解决问题，使用-webkit-tap-hightlight-color:rgba(255,0,0,0);
& & & &6.关于&在移动端会失效，建议添加空元素，设置宽度进行文字隔开。
& & & &【2】.关于行为的总结
& & & & 1.首先要区分开js和jq的写法，两者之间可以转换。可以通过.get(0)转换。
& & & & 2.prop()和attr()的区别和使用。首先，对于html元素本身就具有的属性，需要处理时建议使用prop()方法，而对于自定义的Dom属性等要使用attr().需要注意一点：prop（）的返回&#20540;是true和false；而attr（）的返回&#20540;是类&#20284;“checked”的属性或者undefined；
& & & &3.关于阻止a标签的默认属性的几种方法的利与弊整理：href属性需要填充以下&#20540;，才能使得hover属性起作用，并且阻止跳转。
#，这个会引起页面滚动到顶端，会增加无用的历史记录，会让 url 里有个难看的 #。
#!，##，###，页面不会滚动了，但还是有其他问题。
javascript:;，javascript:void(0);&会让 IE6 的动态 GIF 停止播放。
事件绑定模式下的 return false，不过这种方法覆盖面不全。
事件监听模式下的 event.preventDefault() 和
event.returnValue = false，此方法比较好，&点击 a 标签时，浏览器就无视 href 属性了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：457次
排名：千里之外
原创：12篇
(3)(5)(3)(2)(2)html5（2）
一、 交互上，慎用横屏展示效果。但是在今年的微信传播中，好的创意也可以尝试使用。
　　原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。
& & & &例外：一些好的创意也可以使用横屏，不过要从创意到设计就要严&#26684;把握，需要有准备牺牲部分Android的用户。
& & & 后面附上两个案例：
& & &品客-放开那个姑娘
& & &只要功夫深撩妹100分
二、在H5的设计是必须要考虑的，功能按钮等，远离页面底部(大概128px，这个尺寸不是固定&#20540;)。
　　H5上线需要适配各种机型，有很多客户爸爸用得iPhone4S,i5系列都很容易会导致页面底部的按钮或交互点击的元素被遮盖，具体看重构采用什么适配方式
& & & (适配尺寸参考：WAP版本640X1136 px，微信版本640X1008，主要内容在1008px内)。
　　原因：更好的适配各种屏幕的手机，避免按钮被挡住，最恶心是遇到魅族和华为有虚拟键盘的手机。
三、视觉上，慎用“光线叠加效果”或PS里面的“图层样式”效果。
　　如：给图层加个“柔光”、“滤色”、“色相”等等效果，除非这个视觉元素可以合并为一体。
　　原因：给重构挖坑，导致不好切图，无法还原视觉效果。
& & & &解决办法：
& & & &1、使用输出视频mp4&#26684;式，如果H5整体的动画比较连贯，直接把H5主要部分输出为视频，虽然整体变大，但是动画效果更流畅也不用切图啦~~
& & & &2、使用序列帧
& & & &3、局部采用与背景整张图片一起输出
& & & &整个视频的效果我们看看腾讯韩寒的H5：
& & & 序列帧的案例：
四、在交互上，慎用向右滑动的操作方式。
　　如：刮刮乐涂抹效果，左右滑动翻页等。
　　原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。
五、视觉上，矢量图?想做简单的动画?导出SVG&#26684;式试试!
　　原因：能减少体积的事，为什么拒绝呢……
六、动画上，尽量避免全屏动画，优先考虑局部动画的方式。
　　如：各种粒子效果全屏飘过等。
　　原因：如果呈现的视觉效果无法用代码实现，就意味着要用全屏尺寸的序列帧来处理，体积上会飙升，影响加载体验。
& & & &解决办法：也可以采用视频吧，参考上面的案例。
　　七、动画上，序列帧压缩小技巧，静态的画面，保存较高质量。中间运动的模糊状态，大胆的压低画面质量吧。
　　原因：压缩体积，运动状态就算有锯齿也不明显。
　　八、重构上，图片请上“”，压缩下，有效减少体积。
　　原因：额，这个也要说原因?好吧，偷偷告诉你，现在这网站不止可以压缩png，还可以压缩jpg，更重要的是……支持批量下载了!
& & & 进阶办法：
& & & 提前将图片资源编码进js文件中，管理和预加载H5应用的图片资源，合理的合并请求可以大大提高页面体验。详情参考：
& & 请看天猫双十一的H5邀请函，还支持VR哦：
　　九、重构上，音乐请压缩下，能大大减少整体的体积。
　　技巧：如果没有特殊要求，可以考虑弄成单声道音频文件，比特率48或更低就行了。
　　十、重构上，安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放!(苹果机则没问题)
　　十一、重构上，视频无法自动播放，首次播放需要用户点击触发。
　　(视频用什么&#26684;式?建议用mp4&#26684;式，并用H.264编码器)
　　十二、重构上，测试请多留意“魅族”手机和华为P6/P7等，屏幕底部采用虚拟按钮的手机。设备容易出问题。
　　再来几条小知识：
　　1.微信自带浏览器用的是什么内核?
　　安卓：微信5.4-6.1版本，如果有安装QQ浏览器，则用QQ浏览器的内核。否则用手机系统自带的。
　　微信6.1版本后，内嵌了QQ浏览器的内核。QQ浏览器：6.2版本及以后使用blink内核。之前用webkit内核。x5 tbs 2.x已经全面支持WebGL。但不支持WebGL 2.0，WebGL是基于opengl es 2.0.
WebGL 2.0是基于opengl es 3.0
　　苹果：一直都是系统自带的。
& & & &文章转载自：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4823次
排名：千里之外