移动端开发

最新推荐文章于 2021-03-26 12:30:59 发布

snow_small

最新推荐文章于 2021-03-26 12:30:59 发布

阅读量261

点赞数

分类专栏：前端漫漫路文章标签：移动端开发框架注意事项

本文链接：https://blog.csdn.net/snow_small/article/details/80654041

版权

前端漫漫路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、常用框架

1、css3动画框架：https://daneden.github.io/animate.css/

2、icon字体：http://www.iconfont.cn

js框架：

3、zepto.js：http://zeptojs.com

4、jGestures：摇一摇http://jguestures.codeplex.com

5、swiper：滑动插件http://www.swiper.com.cn

6、iScroll.js：滚动下拉http://iscrolljs.com

二、开发注意事项

1、关于meta

（1）viewport

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

content="宽=设备的宽，初始的缩放比例，允许用户缩放的最大比例，用户是否可以手动缩放"

（2）format-detection：格式检测，可以检测号码、邮箱

<meta name="format-detection" content="telephone=no,email=no,address=no">

禁用检测，拨号可以这样写：

<a href="tel:4008106999,1034">400-810-6999 转 1034</a>

（3）IOS私有属性

网站开启对web app程序的支持，content设置为yes，web应用会以全屏模式运行，这两个都是全屏显示的属性，为了确保兼容，可以都加上：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">

设置导航条的颜色：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

设置桌面图标：区别第一种有光感，显得立体，第二种为原图

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png">

点击桌面图标后进入启动画面：

<link rel="apple-touch-startup-image" href="milanoo_start.png">

2、关于样式

（1）上下拉动滚动条时卡顿、慢

会有滚动回弹的效果：

body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch
}

（2）禁止复制、选中文本

选择器 {
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

（3）长时间按住页面出现闪退:当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。

选择器 {
 -webkit-touch-callout: none;
}

（4）iPhone及iPad下输入框默认内阴影

选择器 {
 -webkit-appearance: none;
}

（5）ios和Android下触摸元素时出现半透明灰色遮罩，类似选中的效果

选择器 {
 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

（6）active兼容处理

<body ontouchstart="">

（7）动画定义3D启动硬件加速

选择器 {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

注意：3D变形会消耗更多的内存与功耗

（8）Retina高清屏的1px边框

选择器 {
 border-width: thin;
}

（9）旋转屏幕时，字体大小调整的问题

html, body, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
 -webkit-text-size-adjust: 100%;
}

（10）transition：闪屏

设置内嵌的元素在3D空间如何呈现：保留3D

-webkit-transform-style: preserve-3d;

设置进行转换的元素的背面在面对用户时是否可见：隐藏

-webkit-backface-visibility: hidden;

（11）圆角bug

某些Android手机圆角失效

background-clip: padding-box;

三、开发过程

1、html结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta name="format-detection" content="telephone=no,email=no,address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="apple-touch-icon-precomposed" href="images/haoroomsicon.jpg">
	<link rel="apple-touch-startup-image" href="images/haoroomsicon.jpg">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2、初始css样式

body, button, select, textarea, input, label, option, fieldset, legend{font-family: 微软雅黑E\8F6F\96C5\9ED1,Tahoma,Verdana;font-size: 12px;line-height: 18px;color: #444;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
textarea{resize: none};
body{background-color: #f6f6f6;}
.clear{height:1px;overflow:hidden;clear:both;}
a,img{border:0;}
a{color: #666;text-decoration: none;}
a:hover{color:#0053a6;}
li{list-style-type:none;}
.fl{float:left;}
.fr{float:right;}
.nf{clear:both;}
.red{color:red;font-weight:bold;}
.green{color:#00b500;font-weight:bold;}
.ds{display:block;}
.hid{overflow:hidden;}
.clearfix{*zoom:1}
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

3、在移动开发时建议通过canvas加载图片

<!-- 自定义的属性以data-xxx开头，获取js中el.dataset.xxx，jquery中$('el').data('xxx') -->
<canvas data-src="images/product/product1.png"></canvas>
<canvas data-src="images/product/product1.png"></canvas>
<canvas data-src="images/product/product1.png"></canvas>

canvas {
	width: 100px;
	height: 100px;
	background: #fff url('../images/loading.gif') center no-repeat;
}

$('canvas').each(function () {
	// 获取图片地址
	var imgSrc = $(this).data('src');
	// 创建image对象
	var imgObj = new Image();
	// 获取canvas对象
	var cvs = $(this)[0];
	var ctx = cvs.getContext('2d');
	// 图片加载完成之后
	imgObj.onload = function () {
		// 设置宽高
		cvs.width = this.width;
		cvs.height = this.height;
		// 绘制
		ctx.drawImage(this, 0, 0);
		// 去掉加载的图片
		$(cvs).css("background-image", "none");
	}
	// image对象的图片地址，最好写在onload后面，避免已有缓存的情况下无法触发onload事件导致onload不执行
	imgObj.src = imgSrc;
});

4、浏览器bug

UC：

（1）不支持部分css3属性，例如calc等

解决方法：width:90%;width:calc(xxx);

（2）滚动事件不会触发touchmove事件，所以要单独加一个touchmove事件

部分浏览器通用问题：margin可能不生效，可以使用padding

5、表单验证插件推荐：validform 网址：http://validform.rjboy.cn/