移动端

mnblue

mnblue|移动端之多指操作

发布于 昨天 10:14 浏览:92 类型:原创 - 随笔 分类:手机移动 举报

1.gesturestart事件(元素)当手指触摸元素,当前屏幕上有两根或者两根以上的手指执行2.gesturechange事件当我们触发了gesturestart时,手指位置发生变化时执行e.scale;缩放比:change时两根手指之间距离和start时两根手指之间的距离比值e.rotation旋转差:change时两根手指形成的直线和start时两根手指形成 ...

mnblue

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

发布于 前天 14:42 浏览:187 类型:原创 - 随笔 分类:手机移动 举报

1、html5重力感应事件之deviceMotion1、事件deviceMotion检测手机晃动(window对象下)2、accelerationIncludingGravity加速度对象html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable= ...

13611606223

13611606223|阻止移动端页面滚动

发布于 5 天前 浏览:282 类型:原创 - 随笔 分类:手机移动 举报

方法一:javascript代码效果预览$(document).on('touchmove',function(e){e.preventDefault();})方法二:css代码效果预览position:fixed;top:0;left:0; ...

mnblue

mnblue|CSS3之transform

发布于 6 天前 浏览:123 类型:原创 - 随笔 分类:HTML/CSS 举报

1.transform2D变换1.rotate旋转(单位deg)html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no"/><title>Document</title><styletype="text/css">#box{width:100px;height:100px;border:1px ...

springalsky

springalsky|JavaScript移动端地址选择器

发布于 7 天前 浏览:164 类型:原创 - 随笔 分类:JavaScript 举报

大家好,在这里推荐一个自己写的picker组件,可拓展多级选择,如日期选择等。项目带有JavaScript移动端地址/城市选择器demo。如果有需要可以使用,经过测试主流的一些手机,如果有什么疑问,可以帮忙提issue。我会尽快答复大家。可以去我的github下载源码。相关说明在readme中。github地址:https://github.com/springals ...

JavaScript移动端地址选择器

最近,结合自己的工作和平时看到的,总结了移动端页面重构布局的一些方法和心得,如下图:制图工具大家应该都知道吧,叫XMind(思维导图),不知道的百度一下就知道了。 ...

一张图让你秒懂移动端页面重构布局(Layout)
彭玉婷

彭玉婷|移动端基础事件总结与应用

发布于 7 天前 浏览:1373 类型:原创 - 随笔 分类:手机移动 举报

触摸事件touch,设备加速度事件devicemotion,设备方向事件deviceorientation,手势事件gesture四个部分的总结和应用,以下demo需要用实体机测试。1.触摸事件touchtouchstart手指放在屏幕上触发touchmove手指在屏幕上移动,连续触发 ...

移动端基础事件总结与应用
mnblue

mnblue|移动端之事件

发布于 7 天前 浏览:137 类型:原创 - 随笔 分类:手机移动 举报

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

mnblue

mnblue|移动端之响应式

发布于 7 天前 浏览:173 类型:原创 - 随笔 分类:手机移动 举报

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

mnblue

mnblue|弹性盒模型

发布于 2017-01-11 16:12:50 浏览:133 类型:原创 - 随笔 分类:手机移动 举报

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

mnblue

mnblue|移动端基础之适配

发布于 2017-01-10 17:17:38 浏览:241 类型:原创 - 随笔 分类:手机移动 举报

1.百分比适配弊端:height无法设置2.viewport适配原理:就是用js把所有设备的viewport设置成一样的html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript ...

mnblue

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

发布于 2017-01-10 15:25:25 浏览:216 类型:原创 - 随笔 分类:手机移动 举报

一、移动端基本环境chrome模拟器360浏览器模拟器(内核也是chrome)本地服务器xampp使用手机连接相同的wifi二、移动端常见问题1、viewport(可视区窗口)& ...

kayun

kayun|一些移动端笔记

发布于 2017-01-03 11:42:42 浏览:378 类型:原创 - 随笔 分类:手机移动 举报

Touch1.touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指。2.touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动。3.touchend:当手指离开屏幕时触发。4.touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面 ...

zhuoyuansheng

zhuoyuansheng|移动端布局计算宽度 动态设置html font-size:

发布于 2016-12-31 10:42:40 浏览:356 类型:原创 - 随笔 分类:手机移动 举报

vardeviceWidth=document.documentElement.clientWidth;if(deviceWidth<=640){document.documentElement.style.fontSize=100*deviceWidth/320+'px';}有的浏览器最小字体12px,这里以320px为基准font-size: ...

Lookforto

Lookforto|touch和click带来的问题

发布于 2016-12-27 10:19:58 浏览:297 类型:原创 - 随笔 分类:手机移动 举报

1.touch事件--移动端--需要绑定以下是四种touch事件touchstart://手指放到屏幕上时触发touchmove://手指在屏幕上滑动式触发touchend://手指离开屏幕时触发touchcancel://系统取消touch事件的时候触发,这个好像比较少 ...

a673383636

a673383636|前端开发笔记1 。

发布于 2016-12-27 09:17:45 浏览:210 类型:原创 - 随笔 分类:手机移动 举报

1:rem适配html代码效果预览//remvardocElement=document.documentElement,Event="onorientationchange"inwindow?"orientationchange":"resize",timer;functionfn(){setRemSize();}functionfnInit(){setRemSize(true);}functionsetRemSize(ini){if(ini){varsize= ...

前端开发笔记1 。
Angelialee

Angelialee|移动端的滑屏

发布于 2016-12-26 15:29:26 浏览:415 类型:原创 - 随笔 分类:手机移动 举报

接到一个奇葩的任务,在一个既不是手机也不是iPad的移动端上做一个滑屏事件(非常非常大的安卓机上),原本是可以考虑使用swiper或者其他的插件来完成的,而需求是在第二屏的时候有个超长的内容需要自带滚动条滚动,当滚动到最低的时候再往上滑出现第三屏,滚动到最顶的时候再向下滑出现第一屏。想了想就放弃了使用插件,改 ...

family929

family929|短信验证。。

发布于 2016-12-22 09:27:31 浏览:450 类型:原创 - 随笔 分类:手机移动 举报

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sca ...

炼心92

炼心92|移动端页面空白页面新建

发布于 2016-12-21 18:37:35 浏览:269 类型:原创 - 随笔 分类:手机移动 举报

html代码效果预览<!doctypehtml><html><head><metacharset="utf-8"><title>基础结构</title><metaname="HandheldFriendly"content="True"><metaname="MobileOptimized"content="320"><metaname="viewport"content="minimal-ui,width=device-width,initial-scale=1.0,maximum-scale=1.0 ...

极乐网

极乐网|一个方案 - 适配所有移动端网页

发布于 2016-12-19 18:15:12 浏览:2763 类型:转载 - 随笔 分类:手机移动 举报

来源:https://zhuanlan.zhihu.com/p/24443208?refer=dreawer做过移动端网页的都知道,在一些高要求的移动网页上解决Iphone5、6、6p的屏幕适配问题上花了不少功夫,但有时候还是不尽满意,各种设备上显示还有稍微有一点差距的。我曾今也尝试了很多办法,也参考了别人加的思路,有的用js,有的用媒体查询,有的用一些比较 ...