缩放功能:
方法一:
通过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元素中
$('.indented').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;会出现滚动条,按需要使用