viewport设置

发表于 | 分类于 |

做移动端开发会经常遇到页面缩放的一些需求。

先要知道这些属性所代表对含义，如：

1
2
3
4
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
  1. width=device-width
    应用程序的宽度和屏幕的宽度是一样的
  2. height=device-height
    应用程序的高度和屏幕的高是一样的
  3. initial-scale=1.0
    应用程序启动时候的缩放尺度（1.0 表示不缩放）
  4. minimum-scale=1.0
    用户可以缩放到的最小尺度（1.0 表示不缩放）
  5. maximum-scale=1.0
    用户可以放大到的最大尺度（1.0 表示不缩放）
  6. user-scalable=no
    用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变

最后，附上一段我写对缩放代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var pageWidth = 设计稿宽度;
var pageHeight = 设计稿高度;
var widthScale = parseInt(window.screen.width) / pageWidth;
var heightScale = parseInt(window.screen.height) / pageHeight;
var scale = widthScale <= heightScale ? widthScale : heightScale;
document.write(
	'<meta name="viewport" content="width=' +
		pageWidth +
		",initial-scale=" +
		scale +
		", minimum-scale=" +
		scale +
		", maximum-scale=" +
		scale +
		', user-scalable=no">'
);

[越努力，越幸运！]