移动端一些零散笔记

1移动端meta标签

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

1.1viewport的含义

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

1.2content值

width:可视区域的宽度，值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

2最大宽度和最小宽度设置

通过min-width和max-width设置

3两栏自适应设置宽度

固定容器设置为：浮动

自适应的容器设置：overflow:hidden;

4移动端事件

4.1touch事件组

touchstart 开始触摸触发

touchmove 来回滑动触发

touchend 手指离开触发

touchcancel 被迫终止触发（来电，弹消息）

5transitionend事件

transition=none只会在transitionend事件触发后才生效；

6媒体查询

@media screen and (min-width:100px) and (max-width:1000px){

css样式

}

7前端top100网页

8模板引擎（art-template）

https://www.cnblogs.com/chrischan/p/6909706.html

1.下载导入

2.创建模板

type=text/template或者text/html

3.把数据使用在模板中

template(‘模板的id’，{必须是对象，需要渲染的数据})

4.当前方法会返回HTML格式的字符串

5.支持全局对象方法{console:console}

<!-- 2.创建模板 -->
<script type="text/html" id="myTemplate">
    <% for(var i = 0 ; i < list.length ; i++){ %>
        <h1><%= list[i].username %>======<%= list[i].position %></h1>
    <% } %>
</script>

<!-- 1.导入 -->
<script src="lib/artTemplate/template-native.js"></script>
<script>

// 3.准备数据
var data=[
    {"username":"疾风剑豪","position":"中路"},
    {"username":"小鱼人","position":"中路"},
    {"username":"寒冰射手","position":"下路"}
];
// 4.返回HTML格式的字符串
var html=template('myTemplate',{list:data});
console.log(html);


</script>

9.移动端jQuery

用zepto.js

有些功能需要导入插件

10.轮播图插件swiper

https://www.swiper.com.cn/usage/index.html