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

[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

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

[c0427]

另外建议 V2EX 增加以下新功能：编辑帖子的时候可以重新选择节点。

[Septembers]

viewport

see https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

[c0427]

@Septembers 感谢回复，文中已说明此方法的不良结果。

[tsingchao]

通过js 获得设备宽度，算出来scale值，在body载入前插入个meta标签

[c0427]

@tsingchao 感谢回复，已经尝试使用 meta 解决，但并未得到意想到的效果。

[66beta]

你这样没意义啊，手机上连字都看不清

[c0427]

@66beta 手机可以通过手指进行缩放啊。巴特，主要是为了学习。

[xuxu]

chrom开发者工具，搜索旁边有个手机图标样的按钮。

[zenozeng]

用 vw, vh 单位就是了。

[Biwood]

viewport就是为这个而诞生的，你不用寻找其他方法了，如果还是乱了，说明你的布局有问题，或者宽度设置不合理

[c0427]

@xuxu 不是 user-agent 问题

[c0427]

@Biwood 感谢回复。我知道我布局中的 CSS 代码应该有问题，但是我找不到解决方法才来提问的额。

[wwwap]

@c0427 因为你CSS的写法导致添加meta信息后，无法全部直接缩放，局部会出现变动。比如，你使用了%，而不是px或者em。

[xiaoz]

使用响应式布局设计，适用所有设备浏览，自动适应屏幕，比如bootstrap

[Biwood]

@c0427 那么你应该在添加了viewport的前提下，用电脑上的移动设备模拟工具来调试，找到CSS代码有问题的地方，然后解决问题。

[loveuqian]

应该是你中间内容的div没设置100%吧

[kslr]

在firefox35 for opensuse 上菜单下方与第一张大图中有空白，并且全屏变得铺满
给.wp加上!important恢复宽度，.bodycontainer padding-top调整到45px恢复正常。

[rqrq]

应该专门做一套手机版的设计，与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'});