参数说明： width -// viewport 的宽度 （范围从200 到10,000，默认为980 像素） device-width为浏览器的物理宽度 height - // viewport 的高度 （范围从223 到10,000） initial-scale -// 初始的缩放比例 （范围从>0 到10） minimum-scale -//

360浏览器算是日常生活中比较常用的浏览器了，一般网页的默认缩放比例都是100%的，这样页面看起来最协调、也是对眼睛最好的。可能有些时候因为某些原因需要调节网页比例的，今天就跟大家分享一下如何调节页面比例！

材料/工具

360安全浏览器

在手机上不能固定宽度，要按百分比写页面宽度。才能自适应设备。主要是这两点，当然细节上面还有很多和PC端不一样的地方。 指向文件错误，比如你的网页文件在A，但是你却指向了B。你把指向的文件放到网页文件内在试试。 如果下载下来的图片大小

方法

打开360安全浏览器。

整个网页宽高按比例缩小,适应手机屏幕,但网页内容和布局不变,跟PC布局一样,不要删减内容,不要像重新制作一个手机站那样的。这种怎样做呢? 整个网页宽高按

打开之后在浏览器页面的右下角位置，有一个100%字样，就表示此刻的页面比例是100%的。

只需三步就可以进行网页缩放： 1、打开手机，点击“设置”，点击“通用”； 2、滑到页面的下方，点击“辅助功能”，点击“缩放”，向右滑动将它正常启用； 3、启用后，用三根手机指在屏幕上连按两次，看看缩放效果； 缩放功能被启用后，就可以通过三指操

点击一下会出现衡量比例的尺子，用鼠标左右拨动比例，就会发现随着鼠标拨动的同时，网页屏幕的字体和比例是在不断变大和缩小的。

页面自适应屏幕的方法（以下字母及标点为码）： 无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。 首先，在网页代码的头部，加入一行viewport标签 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽

可以看到鼠标往右拨动，现在调节的网页比例是140%，网页的字体和比例已经在变大了。

这个不同手机尺寸不一样，比如 iphone3 320*480 iphone4 640 * 960 android 240*320 320* 480 480* 854 这些比较常用，还有一些其他分辨率 看你具体是针对什么手机做的了！ 还有详细的如下—— iPhone界面尺寸：320*480、640*960、640*1136 iPad界

同样的鼠标往左拨动，字体和比例会逐渐缩小。

手机界面下方，是否有一个向四方的箭头，在那里选择“拉伸至全屏”就可以了，是手机设置的问题，不是微信软件的问题。

注意看比例尺前面有个小方框，是用来选择缩放比例对所有网页生效的。打钩就表示同意缩放比例对所有网页生效（只要调节比例，在浏览器打开的所有网页都会随着比例放大缩小）；不打钩，表示只对当前页面调节有效。

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏) iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏) Note2 360 * 567 (未隐藏URL与状态栏) iPad 3/4 768*928 (未隐藏URL与状态栏) GALAXY SIII 360 * 567 (未隐藏URL与状

扩展阅读，以下内容您可能还感兴趣。

手机微信页面变大了,怎么恢复正常比例

手机界面下方，是否有一个向四方的箭头，在那里选择“拉伸至全屏”就可以了，是手机设置的问题，不是微信软件的问题。

手机版网站怎么让背景等比例缩放?

用百分比设置宽度和高度追问高度我用百分比压跟就没反应。。

手机网页图片布局怎么控制图片长宽比例

两个手指同时触屏手指靠拢是缩小，拉长是扩大

手机前端页面尺寸

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)

iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)

Note2 360 * 567 (未隐藏URL与状态栏)

iPad 3/4 768*928 (未隐藏URL与状态栏)

GALAXY SIII 360 * 567 (未隐藏URL与状态栏)

小米2A 360 *567 (未隐藏URL与状态栏)

HTC G10 320 * 460

<meta name="viewport"

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

<meta name="viewport"

content="width=device-width, initial-scale=1.0, minimum-scale=1.0,

maximum-scale=1.0,

user-scalable=no">

width - viewport的宽度 height -

viewport的高度

initial-scale - 初始的缩放比例

minimum-scale -

允许用户缩放到的最小比例

maximum-scale -

允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

参考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

一、网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

<meta name="viewport"

content="width=device-width,

initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,

user-scalable=no">

其中： width - viewport的宽度 height - viewport的高度 initial-scale -

初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例

user-scalable -

用户是否可以手动缩放c

二、关于meta的详细介绍请参考

三、下文是关于Meta的例子的详细介绍 原文地址

3. Meta元素可视区

　　e69da5e6ba907a6431333335343965默认情况下，iPhone上的Safari会象在大屏幕的

桌面浏览器那样显示你的页面，宽度达到了980像素，然后缩小内容以适应iPhone的小屏幕，因此用户在iPhone看这个页面时感觉字体就比较小了，

也比较模糊，必须要放大才能看得真切，对于一个普通的Web页面似乎可以接受，但对于一个常用的应用程序就没几个人能够受得了。

　　幸运的是可以使用特殊的Meta元素可视区进行纠正：

<meta

name="viewport" content="width=device-width"/>

　　这个元素通知浏览器使用设备的宽度作为可视区的宽度，而不是默认的980像素了，我们可以看看两个不同的例子。

　例3(链接：http://www.sitepoint.com/examples/iphone-development-12tips/no-

viewport.html)显示了一个简单的段落元素，没有Meta元素可视区，字体有点模糊。在iPhone中运行的实际情况如下图所示。

图 1 无可视区的显示效果

　例4(链接：http://www.sitepoint.com/examples/iphone-development-12tips

/viewport.html)包括了一个可视区元素，现在设备宽度只有320像素，字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图

所示。

图 2 有可视区的显示效果

　另外，你还可以手动设置device-width的值，例如，假设你的博客页面的宽度是750像素，那么桌面屏幕最佳大小就是800x600像素，例

5(链接：http://www.sitepoint.com/examples/iphone-development-12tips

/fixed750.html)显示了一个删减版本，如果你在iPhone中浏览它，你会看到980像素剩下的空间都填充了白色。

　　为了消除额外的空间，可以使用meta元素可视区将宽度设为780像素：

<meta

name="viewport" content="width=780"/>

　　例6(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。

　　Meta元素可视区的内容可以包括多个逗号分隔的值，如initial-scale –

用户最初看到页面时的放大级别，对于Web应用程序，一个常见的设置是：

<meta

name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

　　这个元素设置宽度为设备的最大宽度，禁止用户放大和缩小

怎么调整手机屏幕大小

（1）屏幕是没有办法调整的，是固定的。

（2）只能调整手机字体的大百小，完成感官上屏幕大小的改变。

怎么调整手机字体的度大小：

（1）首先，我们要打开我们手机的“设置”。

（2）接着，我们再找到“显示和亮度”项目，并点击打开它。

（3）接着，我们就可知以看到“字体大小”的调整项目了，点击打开它。

（4）我们就可以对我们手机的字体进行调整了，手机提供的调整方式有4种，分别是“小号~默认~中号~大号~超道大”，我们只需根据我们的需要选择就好了。