61,112
社区成员
发帖
与我相关
我的任务
分享如何让网页自适应手机屏幕分辨率
我做的网页感觉在不同屏幕分辨率下显示效果不同，现在又什么好的办法解决这个问题没，能让网页自适应屏幕分辨率
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
...全文
请发表友善的回复…
发表回复
wil00 2016-01-30
- 打赏
- 举报
非常感谢~~~
zhengshuang87 2014-08-22
- 打赏
- 举报
非常感谢2楼啊
这段在做应用中嵌入网页，被嵌入的网页总被缩放，非常烦恼。
让安卓工程师加上此句后：webSettings.setSupportZoom(false); 仍旧还是被缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （ 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小）
页面所有字号大小，都按照某一宽度
比如设计图页面宽度640的，然后所有不同分辨率的手机，都按640px缩放。
再加上2楼的这段代码。就解决了大屏手机高分辨率下，字体过小的问题。而且切图时也不用考虑多种分辨率的不同css，统统按只支持640px的做就足矣！
[/quote]
可是这种方法有个问题呢，火狐和Opera不支持zoom，其他手机浏览器对zoom支持度也待确定
Joyce-Luo 2014-08-14
- 打赏
- 举报
去看看jqm（jqueryMobile），或许能改变你的思路！
u014380771 2014-08-12
- 打赏
- 举报
非常感谢2楼啊
这段在做应用中嵌入网页，被嵌入的网页总被缩放，非常烦恼。
让安卓工程师加上此句后：webSettings.setSupportZoom(false); 仍旧还是被缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （ 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小）
页面所有字号大小，都按照某一宽度
比如设计图页面宽度640的，然后所有不同分辨率的手机，都按640px缩放。
再加上2楼的这段代码。就解决了大屏手机高分辨率下，字体过小的问题。而且切图时也不用考虑多种分辨率的不同css，统统按只支持640px的做就足矣！
[/quote]
楼主，我最近也在做手机端开发，这两句话直接放在js和head里就可以用了吗，我的怎么没用啊
梨花IP异常 2014-06-18
- 打赏
- 举报
推荐一个网站给你，我自己也是做移动端Web的。http://razorflow.com/这个是专门用于针对移动端开发的产品
还有个方法就是用base.css文件，不过用base.css文件的话不能做到在不同客户端下显示不同排版。
lin_style 2014-06-18
- 打赏
- 举报
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0;" />
加上这句
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
小成长 2014-06-14
- 打赏
- 举报
刚开始写css的时候就应该注意到，不可以写死的宽高，要用百分比及最大最小值的设定
fjfjfj 2014-06-13
- 打赏
- 举报
非常感谢2楼啊
这段在做应用中嵌入网页，被嵌入的网页总被缩放，非常烦恼。
让安卓工程师加上此句后：webSettings.setSupportZoom(false); 仍旧还是被缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"> （ 加上这句 target-densitydpi=device-dpi 可强制显示真实分辨率大小）
页面所有字号大小，都按照某一宽度
比如设计图页面宽度640的，然后所有不同分辨率的手机，都按640px缩放。
再加上2楼的这段代码。就解决了大屏手机高分辨率下，字体过小的问题。而且切图时也不用考虑多种分辨率的不同css，统统按只支持640px的做就足矣！
xiaowanzi80hou 2013-09-03
- 打赏
- 举报
JPF1024 2013-09-01
- 打赏
- 举报
用ui框架吧，或者去看看响应式设计方面的书.
ui框架:bootcss
houzhi119 2013-09-01
- 打赏
- 举报
又学习了，不过手机同时兼容大显示器分辨率还是不行吧。毕竟尺寸在哪里呢
xieweiguang11 2013-08-28
- 打赏
- 举报
width：100%；
异常异长 2013-08-28
- 打赏
- 举报
<meta name="viewport" content="width=320px, user-scalable=no, initial-scale=1, maximum-scale=1">
wg5945 2013-08-28
- 打赏
- 举报
<meta name="viewport" content="width=320px, user-scalable=no, initial-scale=1, maximum-scale=1">
螃蟹k3179 2013-08-28
- 打赏
- 举报
用link标签
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
wg5945 2013-08-28
- 打赏
- 举报
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
}); 
