个人分类:移动端(8)

移动端之多指操作

1.gesturestart事件(元素)当手指触摸元素,当前屏幕上有两根或者两根以上的手指执行2.gesturechange事件当我们触发了gesturestart时,手指位置发生变化时执行e.scale;缩放比:change时两根手指之间距离和start时两根手指之间的距离比值e.rotation旋转差:change时两根手指形成的直线和start时两根手指形成的直线,中间形成夹角注意://gesture相关的事件,只有ios下有,安卓没有这个事件3.gestureend事件当我们触发了gesturestart时,然后抬起手指,这时屏幕上的手指个少于2个或者当前元素没有手指了,就会触发gestureendhtml代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Doc

移动端之陀螺仪(重力感应)

1、html5重力感应事件之deviceMotion1、事件deviceMotion检测手机晃动(window对象下)2、accelerationIncludingGravity加速度对象html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no"/><title>Document</title><styletype="text/css">#box{width:200px;height:200px;background:Red;color:#fff;font-size:20px;}</style></head><body><divid="box"></div><scripttype="text/javascript">(function(){varbox=document.querySelector('#box');//添加事件window.a

移动端实例之无缝轮播图

html代码效果预览<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,user-scalable=no"><title>Document</title><scripttype="text/javascript">//获取htmlvarhtml=document.documentElement;//设置html的字体大小=可视区的宽度/15html.style.fontSize=html.clientWidth/15+'px';//阻止pc和浏览器默认行为。document.addEventListener('touchstart',function(ev){ev.preventDefault();});</script><style>body{margin:0;}.wrap{height:4.68rem;position:relative;}.list{padding:0;margin:0;width:400%;pos

移动端之事件

1、移动端事件移动端的三大事件:手指按下:ontouchstart手指移动:ontouchmove手指抬起

移动端之响应式

1.mediamin-width:当屏幕大小大于等于某个值的时候识别max-width:当屏幕大小小于等于某个值的时候

弹性盒模型

1.弹性盒模型(新版)使用时父级元素需添加display:flex;(老版)使用时父级元素需添加display:-webkit-box;2.关于主轴主轴是影响弹性盒模型元素排列的方向(默认是水平方向,从左往右)侧轴是与主轴垂直的方向(默认是垂直方向,从上到下)html代码效果预览/*新版弹性盒模型*//*display:flex;*//*设置主轴方向为水平,元素排列为反序*//*flex-direction:row-reverse;*//*设置主轴方向为垂直,元素排列为反序*//*flex-direction:column-reverse;*//*老版弹性盒模型*/display:-webkit-box;/*设置主轴方向为水平方向*//*-webkit-box-orient:horizontal;*//*设置主轴方向为垂直方向*

移动端基础之适配

1.百分比适配弊端:height无法设置2.viewport适配原理:就是用js把所有设备的viewport设置成一样的html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript">(function(){varw=window.screen.width;vartargetW=320;varscale=w/targetW;//当前尺寸/目标尺寸varmeta=document.createElement("meta");meta.name="viewport";meta.content="user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""document.head.

移动端开发基础之常见问题

一、移动端基本环境chrome模拟器360浏览器模拟器(内核也是chrome)本地服务器xampp使用手机连接相同的wifi二、移动端常见问题1、viewport(可视区窗口)默认不设置viewport,一般可视区宽度在移动端为980width可视区宽度(num||device-width)分为数字和设备宽度(固定数字在一些安卓机上不能识别)user-scalable是否允许用户缩