大家是怎么解决屏幕适配的问题的？

分类：HTML5+

App

现在手机有那么多分辨率，按级别分就有4类。
用html5做手机应用怎么解决屏幕适配的问题？
有些布局可以使用百分比完成，但是字体大小怎么办？而且用百分比写起来好麻烦。
我之前做Android的，适配没什么问题。HTML5该怎么做？
求教各位。

而且调整的同样的分辨率，Hbuilder的边看边改模式出来的界面和chrome模拟的界面的字体大小不一样，不知道为什么。

之前看到可以在body里面设置font-size的百分比来控制整个页面的字体大小，然后我想获取当前屏幕的宽来算比例乘上去，但是plusready之后就不能改变body的font-size了。也不知道是我改变的方法不对还是不支持。

刚刚又查了一下，看到了CSS3 media query响应式布局，那我在想，是不是可以根据不同的分辨率用不同的css文件调整一下font-size就行了呢？

2015-01-12 12:20 负责人:无分享

4 个回复

gerry

用rem也是可以的，淘宝的webapp就是用的rem做的适配

hyhezhen

之前处理屏幕适配，是在欢迎页面检测出屏幕尺寸，进入其他页面ready后读出屏幕标志，再加载子页面和样式表
if(lcd_type == "iphone4")
{
mui.init({
subpages:[{
url:str_url,//下拉刷新内容页面地址
id:"main_panel",//内容页面标志
styles:{
top: '45px',
bottom: '180px'
},
}]
});

            $("<link>")  
            .attr({ rel: "stylesheet",  
                type: "text/css",  
                href: "css/iphone4.css"  
            })  
            .appendTo("head");  
    }。。。

确实有效，但是页面刚进来时会有错乱，过一会才好（初始样式表不正确）

后来知道有响应式布局，可以对应不同分辨率（IOS设备）
就这样加载样式表
//默认5S, 后续可以被 4S 6 的样式所覆盖
<link href="css/iphone5.css" rel="stylesheet"/>
//4S
<link rel="stylesheet" type="text/css" href="css/iphone4.css" media="screen and (width: 320px) and (device-height:480px)">

//IPHONE 6
<link rel="stylesheet" type="text/css" href="css/iphone6.css" media="screen and (width: 375px)">
去掉
$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "css/iphone4.css"
})
.appendTo("head"); 这一段
子页面的载入部分不变，不过一开始就可以加载正确的样式表，比原来要快。用户体验要好

伟子

我是这么适配的

zoom: function() {  
        var WID = jQuery(window).width();  
        $('html').css("zoom", WID / 640);  
    },

尘岳two (作者)

呃，我对jQuery不是太熟悉，请问你的这段代码是将整个页面按照宽度640的比例缩放吗？

那字体什么的也是一起缩放吗？

那写布局的时候，单位还是用px？还是用百分比或者em？

2015-01-12 12:46
伟子

字体是硬伤，根本不缩，我是这样做的，把字体全部都提取到一个css，复制两份，一个叫font-ios.css,一个交font-android.css 也就是说分别调试安卓和IOS的字体大小，因为实际中，两个平台的字体差异真的很大

2015-01-12 18:28
尘岳two (作者)

回复伟子:是的，美工给我的设计图用的ios的字体。然后跑到我的Android上不好看。你说的把字体提到一个css文件是指的所有关于字体属性的设置全部单独弄一个css文件，然后根据平台来调用吗？这个根据平台来调用具体怎么操作呢？

2015-01-12 20:11
尘岳two (作者)

回复伟子:而且我用的时候字体会缩放啊。不过我没用jQuery，不大会。

mui.plusReady(function() {

var screenWidth = plus.screen.resolutionWidth;

document.body.style.zoom = screenWidth / 320;

});

2015-01-12 20:18

尘岳two (作者)

暂时用这个解决了，不知道有没有问题，反正暂时没发现。

mui.plusReady(function() {  
var screenWidth = plus.screen.resolutionWidth;  
document.body.style.zoom = screenWidth / 640;  
});

这个640是布局的时候参考的效果图的宽度

该问题目前已经被锁定, 无法添加新回复

大家是怎么解决屏幕适配的问题的？

4 个回复

公告

相关问题

大家是怎么解决屏幕适配的问题的？

与内容相关的链接

4 个回复

公告

相关问题