移动开发基本知识点
1、基础Meta基础知识:
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
// width 设置viewport宽度,为一个正整数,或字符串‘device-width’
// height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
// initial-scale 默认缩放比例,为一个数字,可以带小数
// minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
// maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
// user-scalable 是否允许手动缩放
其他meta知识
打电话、发短信、写邮件如何实现:
// 一、打电话
// 二、发短信,winphone系统无效
// 三、写邮件
//注:在添加这些功能时,第一个功能以"?"开头,后面的以"&"开头
//1.普通邮件
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
//3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)
//4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址
//5.包含主题,用?subject=
//6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行
//7.内容包含链接,含http(s)://等的文本自动转化为链接
//8.内容包含图片(PC不支持)
因此页面通用模板如下:
这里开始内容
2、使用rem作为单位:
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }
给手机设置100px的字体大小; 对于320px的手机匹配是100px,
其他手机都是等比例匹配; 因此设计稿上是多少像素的话,那么转换为rem的时候,rem = 设计稿的像素/100 即可;
还有一种方法就是使用fontSize.js
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = "100px";
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
}
};
if (!doc.addEventListener) return;
recalc();
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
该方法的转换和上面一样: rem = 设计稿的像素/100 即可;
3、禁用a,button,input,select,textarea等标签背景变暗
移动端使用a标签做按钮的时候或者文字连接的时候,点击按钮会出现一个 "暗色的"背景,比如如下代码:
在移动端点击后 会出现"暗色"的背景,这时候我们需要在css加入如下代码即可:
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
4、移动端IOS手机下清除输入框内阴影,代码如下
input,textarea {
-webkit-appearance: none;
}
5、在IOS中 禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}
6、calc基本语法:
.class {width: calc(expression);}
它可以支持加,减,乘,除; 在我们做手机端的时候非常有用的一个知识点;
优点如下:
1. 支持使用 “+”,”-“,”*” 和 “/” 四则运算。
2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。
浏览器的兼容性有如下:
IE9+,FF4.0+,Chrome19+,Safari6+
如下测试代码:
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}
7、移动端click产生200-300ms延迟
说明:移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。
以下是历史原因,来源一个公司内一个同事的分享:
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
//事件响应顺序
ontouchstart > ontouchmove > ontouchend > onclick
//解决方案:
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
8、屏幕旋转及重力感应事件
---屏幕旋转:
//JS处理
function orientScreen(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape'){
//这里是横屏下需要执行的事件
}else{
//这里是竖屏下需要执行的事件
}
}
orientScreen();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
setTimeout(orientScreen, 100);
},false)
//CSS处理
//竖屏时样式
@media all and (orientation:portrait){ }
//横屏时样式
@media all and (orientation:landscape){ }
---重力感应事件:
// 运用HTML5的deviceMotion,调用重力感应事件
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
//这里是摇动后要执行的方法
fnHander();
}
lastX = x;
lastY = y;
lastZ = z;
}
function fnHander(){
//do something
}