1.既然是移动端, 就一定要按照移动端规范走, 直接使用 Chrome 浏览器进行移动端开发测试
2.推荐固定宽度布局 核心代码：width=750, 将width设定为设计稿宽度(重要 !)
<meta name="viewport" content="width=750,target-densitydpi=device-dpi,user-scalable=no" />
原理：根据设计的宽度，在viewport定死页面的宽度，这样可以全部用设计的像素宽高来进行定位操作(pc端页面的切图方式)。同时，用viewport的属性让页面宽度占满全屏。即: 按照设计稿进行 1:1 页面重构后, 页面将自动进行缩放, 不用再考虑适配问题
缺点: 当设计稿的宽度很大, 但是移动端的屏幕较小时, 有的按钮可能会小于可视宽度, 点击时不一定能够一次点击成功,导致用户体验不好
解决方法: 给娇小的图标按钮添加一个外层 div盒子将其宽高放大, 将事件绑定在这个外层的div盒子上
3.尽量使用 padding 和 margin 布局,
- 切图要注意,多用盒子嵌套盒子来完成页面布局,不要用太多浮动和定位(尤其是定位,很容易出现问题)
- 盒子的高度不要定死，尽量使用标签和padding将其撑开
-
出现了图片下方还要写文字的，一律使用div盒子包含img的格式。将大盒子撑开，尽量不要使用margin和定位
<div class="box-pic">
<div class="btn-box">
<div class="J_open_red">拆<span>拆</span>拆</div>
</div>
</div>
4.遮罩层（半透明背景）是单独的一层,里面不要添加任何东西,使用绝对定位和层级z-index来完成页面的重合部分。
5.需求方嫌弃页面第一次打开时需要授权,然后页面加载刷新两次的问题.
解决方法: 给页面中的 <body>标签添加一个display:none属性,然后,在微信授权成功后删除此属性(虽然时间没有什么变化...)
6.移动端的页面切换经常需要各个页面进行参数传递
HTML 5 Web 存储
方法1:
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
方法2:
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
7.IOS 和 Android 判断
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid == true){
document.getElementById("p1").innerHTML="安卓";
}else{
document.getElementById("p1").innerHTML="IOS";
}
网友评论