【web】页面缩放和滑动功能实现的方法总结

缩放功能：

方法一：

通过meta元素实现缩放功能：

手机页面禁止缩放：

示例1：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

示例2：（常用）

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

手机页面可以缩放：

示例1：

<meta name="viewport" content="width=device-width, initial-scale=2.5, minimun-scale=1.0, maximum-scale=5.0, user-scalable=yes"/>

属性解释：

width = device-width
—— 指示视区宽度为设备的屏幕宽度

height = device-hight —— 指示视区高度为设备的屏幕高度

width = pixel_value —— 宽度（以像素为单位）

height = pixel_value —— 高度（以像素为单位）

initial-scale = float_value —— 初始的缩放比例

minimum-scale = float_value —— 允许用户缩放到的最小比例 （值的范围为0.25至10.0之间）

maximum-scale = float_value —— 允许用户缩放到的最大比例 （值的范围为0.25至10.0之间）

user-scalable = [yes | no] —— 用户是否可以手动缩放 （值为yes时允许用户进行缩放，值为no时不允许缩放）

方法二：

缩放功能也可以使用一些js插件——zoom.js

http://www.oschina.net/p/zoomjs?fromerr=iWPTPisF

插件功能：

在页面上点击，目标处的内容会放大，再次点击或者按 ESC 键即可恢复原始大小

备注：

如果是子元素比父元素的宽高要大的话，使用的意义不大！！！

滑动功能：

CSS属性：overflow

http://www.w3school.com.cn/cssref/pr_pos_overflow.asp

使用示例：

通过动态插入某段html 到div元素中

$('.i
4000
ndented').append(html);

当插入的这段html 比父元素的宽高要大的话，就会超出屏幕显示！！

此时可以使用CSS的属性：overflow:auto;

但是这样还未能完事

父级div怎能么自适应子元素的宽高？

不要设置父元素的height和width属性，或者设置为width:100%; height:100%; 

<div class="indented" style="width:100%; height:100%; overflow:auto;">

但是这样的写法只能在android端上适用，ios端是滚动不到的，还需要添加一句CSS代码

-webkit-overflow-scrolling : touch;

原因是ios内置的是safari浏览器，与android内置的浏览器内核不同，因此出现了不兼容。

完全写法：

<div class="indented" style="width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch;" >

这样当子元素的内容超过父元素的宽高时，会自动撑开

备注：

使用overflow:scroll;会出现滚动条，按需要使用