Html5开发总结
页面头部要求
必需设定下面meta
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=10,user-scalable=no" />
|
页面等比缩放
目地:
设置页面随着屏幕大小等比缩放
方案:
页面所有尺寸均采用rem为单位
动态设置html标签(页面根节点) font-size属性为x 像素
实践前奏:
(公式一)
标准的手机屏幕宽是320 px,标准的font-size时16 px
320 / 16 = 20/1 (即:手机屏幕宽与像素的比是20:1)
所以屏幕宽为x,那么像素就是x/20
(公式二)
1像素等于 1/16 rem
标准页面font-size为16px即1 rem 所以1像素为1/16rem
由这个公式可以将页面中所有像素为单位的值转为rem
动态设置font-size:
var fontSize = document.documentElement.clientWidth / 20; document.documentElement.style.fontSize = fontSize + 'px';
|
像素转换:
如果一个元素width=150px; height=60px; 那么它的对象rem值为多少? Width = 150 * 1/16; height=60*1/16; 即 width=9.375rem; height=3.75rem;
|
监听输入框值改变
监听文本输入框内容变化,只需绑定oninput 和 onpropertychange事件即可
$("input,textarea").bind("input propertychange",function(e){ var text = $(this).val(); console.log(“当前输入值为:”+text); });
|
CSS样式相关
1. 在写样式的时候,iphone会有一些默认样式,
使用-webkit-appearance:none可去除系统默认的样式
2. 溢出省略号…
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
|
微信浏览器中相册浏览功能
document.addEventListener("WeixinJSBridgeReady",function(){ $(".shop-pic img").click(function(){ var currImg = $(this).attr("src"); //imagePreview不能变,固定的 WeixinJSBridge.invoke("imagePreview",{ "urls":iShop_photos,//图片地址数组 [绝对路径] "current":currImg//当前图片地址 }); }); });
|