【总结】前端移动端开发的介绍

前端移动端开发注意|安卓开发和移动前端开发|移动web前端开发技术

1、css3背景图片自适应大小:
background-origin:content;
background-position:50% 23%;
background-size:contain;
background-repeat:no-repeat;
max-width: 62%;

2、为手机添加视口:<meta content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no” name=”viewport” id=”viewport” />

3、内容与缓存:<html manifest=”/mobile.manifest”>

4、媒体查询<link rel=”stylesheet” href=”css/theSecond1.css” media=”(min-width:900px)”>
<link rel=”stylesheet” href=”css/theSecond2.css” media=”(min-width:500px) and (max-width:899px)”>
<link rel=”stylesheet” href=”css/theSecond.css” media=”(max-width:499px)”>

5、去除hr阴影
border-top:1px solid #D2D2D2;
border-left:none;
border-right:none;
border-bottom:none;

6、文字在不同分辨率显示位置的不同的坑

 文字的单位用rem,还有就是给装文字的div设宽度(百分比),移动端尽量不要用position,可以用float!因为用position很难把握他在不同分辨率的时候会不会出现百分比值的问题,所有图片用div或者说明容器装起来,然后width:100%;height:100%;尽量在body写宽和高的100%;不然下方盒子写height:100%;就无效了。在遇到图片一定要固定高度的时候使用max-width:百分比;切记移动端定要用百分比来书写,字体不能用百分比,加入一个字体是font-size:20%;在960的分辨率下肯定没什么问题,如果用户的手机320,那么字体就会华丽丽的被放大了几倍,

7、多个文字的时候后面应是“….”高度和宽度都是

  1. overflow: hidden;
  2. white-space: nowrap;

8、垂直线
<hr size=”300″ width=”1″>

9、使用zepto中的一些经验
$(“.head”).stop(true)——防止作死点击事件无休止的用户,拒绝动画累积的情况
(1)swipeDown——手机触碰屏幕下滑
$(“body”).on(“swipeDown”,function(){
$(“.head”).stop(true);——动画积累
$(“.date”).show(100)——show(“时间”)
});
swipeUp,swipeLeft,swiperight !如上述

       (2)tap代替click!因为 click 事件有 200~300 ms 的延迟,为了更快的响应,最好用 Zepto 提供的 tap 事件

10、zepto的一些:
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签

11、关于头像圆形一说:
<div class=”head”>
<img src=”images/move.png” height=”480″ width=”480″ alt=””>
</div>
div必须设成px的正比,比如说:width:50px;height:50px;!然后就是img就是width和height都是100%!这样就不会出现在不同手机分辨率头像会变扁的情况发生!

12、绝对定位居中显示:
position: absolute;
top: 90px;
left: 50%; //水平居中50%,同理垂直居中。。。。
margin-left: -321px; //居中重要属性

13.移动端的meta标签:
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
禁止用户缩放页面,user-scalable=yes”表示可以缩放页面
<meta name=”format-detection” content=”telephone=no” />
之前的写错了! 告诉设备不要将页面中的数字识别为电话号码

14:输入框获取焦点页面放大解决方法!
<meta content=”yes” name=”apple-mobile-web-app-capable”>
<meta name=”viewport” content=”width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;”>

web前端开发pdf教程|移动端前端开发api|前端开发 移动端和pc端

» 本文来自:前端开发者 » 《【总结】前端移动端开发的介绍》
» 本文链接地址:https://www.rokub.com/4044.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!