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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3355 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

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

meta

前端

页面

18 条回复 • 2015-02-26 23:24:38 +08:00

c0427

2015-02-26 16:08:14 +08:00

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

Septembers

2015-02-26 16:10:29 +08:00

viewport

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

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'});