前端菜鸟请教:怎么让网页直接缩放适配设备的分辨率?

2015-02-26 16:02:43 +08:00
 c0427

前天花了一下午和一晚上做了一个关于第87届奥斯卡的专题页面: http://www.antzone.cn/topic-87thOscar.html

主要用 HTML+CSS 实现,因为 Discuz! 包含 DIY 功能,所以我直接把写好的代码嵌套进了 Discuz! 专题页面,这是背景介绍。现在详述我亟待解决的问题:

我在向朋友请教的时候,他建议我在 head 中添加以下 meta 信息:

<meta name="viewport" content="width=device-width, initial-scale=1">

添加完成后的显示效果是这样的:

http://i2.tietuku.com/112822d23c8f9e52s.jpg

而不添加的时候是这样的:

http://i2.tietuku.com/6e6f20f9406835ebs.jpg

我想要的是把下图所示的整体直接缩放然后在不同分辨率的设备上直接显示:

http://i2.tietuku.com/55b46a0a95331905.png

请前端高手指教,我想在不使用响应式设计的情况下,让这个页面直接缩放,网页中所有的模块位置和大小百分比均保持不变。请问怎么实现?谢谢。

5415 次点击
所在节点    问与答
18 条回复
c0427
2015-02-26 16:08:14 +08:00
另外建议 V2EX 增加以下新功能:编辑帖子的时候可以重新选择节点。
Septembers
2015-02-26 16:10:29 +08:00
c0427
2015-02-26 16:13:17 +08:00
@Septembers 感谢回复,文中已说明此方法的不良结果。
tsingchao
2015-02-26 16:15:11 +08:00
通过js 获得设备宽度,算出来scale值,在body载入前插入个meta标签
c0427
2015-02-26 16:17:33 +08:00
@tsingchao 感谢回复,已经尝试使用 meta 解决,但并未得到意想到的效果。
66beta
2015-02-26 16:18:40 +08:00
你这样没意义啊,手机上连字都看不清
c0427
2015-02-26 16:19:54 +08:00
@66beta 手机可以通过手指进行缩放啊。巴特,主要是为了学习。
xuxu
2015-02-26 16:28:03 +08:00
chrom开发者工具,搜索旁边有个手机图标样的按钮。
zenozeng
2015-02-26 16:29:26 +08:00
用 vw, vh 单位就是了。
Biwood
2015-02-26 16:30:29 +08:00
viewport就是为这个而诞生的,你不用寻找其他方法了,如果还是乱了,说明你的布局有问题,或者宽度设置不合理
c0427
2015-02-26 16:31:12 +08:00
@xuxu 不是 user-agent 问题
c0427
2015-02-26 16:32:05 +08:00
@Biwood 感谢回复。我知道我布局中的 CSS 代码应该有问题,但是我找不到解决方法才来提问的额。
wwwap
2015-02-26 16:37:57 +08:00
@c0427 因为你CSS的写法导致添加meta信息后,无法全部直接缩放,局部会出现变动。比如,你使用了%,而不是px或者em。
xiaoz
2015-02-26 16:46:14 +08:00
使用响应式布局设计,适用所有设备浏览,自动适应屏幕,比如bootstrap
Biwood
2015-02-26 16:54:02 +08:00
@c0427 那么你应该在添加了viewport的前提下,用电脑上的移动设备模拟工具来调试,找到CSS代码有问题的地方,然后解决问题。
loveuqian
2015-02-26 17:24:13 +08:00
应该是你中间内容的div没设置100%吧
kslr
2015-02-26 17:33:24 +08:00
在firefox35 for opensuse 上菜单下方与第一张大图中有空白,并且全屏变得铺满
给.wp加上!important恢复宽度,.bodycontainer padding-top调整到45px恢复正常。
rqrq
2015-02-26 23:24:38 +08:00
应该专门做一套手机版的设计,与pc版区分开来(响应式设计略蛋疼)
手机版整体缩放可以用css3的transform
下面是设计稿基于iPhone5s(640x1008),而又要在Android设备上显示不留空白的代码(根据需要自己设置要高度还是要宽度),你看下有没有用吧。

html head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=high-dpi">

css:
body{ line-height:1; font-family:Arial; width: 640px; -webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:left top;-ms-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top; }

js:
var iWidth = document.documentElement.clientWidth || document.body.clientWidth;
var iHeight = document.documentElement.clientHeight || document.body.clientHeight;
var iScale = 1;
var iDocH = $('body').height();

//iScale = iWidth/640;
iScale = iHeight / 1008;

$('body').css({'-webkit-transform':'scale('+ iScale +')','-moz-transform':'scale('+ iScale +')','-ms-transform':'scale('+ iScale +')','-o-transform':'scale('+ iScale +')','transform':'scale('+ iScale +')'});
//iDocH = $('body').height();
iDocW = $('body').width();

$('body').parent('html').css({'width':iDocW*iScale+'px','margin':'auto'});

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/172952

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX