• 全部
  • 问答

如何让网页自适应手机屏幕分辨率

A_紫夜星辰 2013-08-27 11:37:41
我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率
并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
...全文
60432 1 收藏 17
写回复
17 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
wil00 2016-01-30
引用 2 楼 wg5945 的回复:
        
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
});	
试试呢~~
非常感谢~~~
回复
zhengshuang87 2014-08-22
引用 10 楼 fjfjfj 的回复:
[quote=引用 2 楼 wg5945 的回复:]
        
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
});	
非常感谢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
引用 10 楼 fjfjfj 的回复:
[quote=引用 2 楼 wg5945 的回复:]
        
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
});	
非常感谢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 楼 wg5945 的回复:
        
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 640);
$("body").css("display" , "block");
});	
非常感谢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的做就足矣!
回复
Q544471255 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");
});	
试试呢~~
回复
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2013-08-27 11:37
社区公告
暂无公告