第135天:移动端开发经验总结

一、移动端三种布局

  1、有最大、最小宽度的百分比自适应布局

  适用场景:门户网站首页,图片较多的首页。

  2、百分比自适应布局

  适用场景:信息文字较多的网页,内容较多网页。

  3、全屏自适应布局

  适用场景:单页面网页,移动web app 页面。

二 、Box-sizing在移动端的使用

  在百分比定宽的页面经常使用。

*,
::before,
::after{
    -webkit-box-sizing: border-box;
/*以你的border开始计算你的宽度*/
}

三、 移动端事件

1、Touch

touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,

会调用eventpreventDefault()可以阻止默认情况的发生:阻止页面滚动

touchend:当手指离开屏幕时触发

touchcancel:系统停止跟踪触摸时候会触发。

例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick  300ms延时

2、Event

originalEvent (原生事件) 是jquery 封装的事件。

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

clientXclientY 相对于当前屏幕的X或Y位置

pageXpageY 相对于整体页面的X或Y位置

transitionEnd 过渡结束事件。

animationEnd 动画结束事件

3、移动端事件框架

例如 zepto  touch.js

'swipe',

'swipeLeft',

'swipeRight',

'swipeUp',

'swipeDown', 'doubleTap',

 'tap',

'singleTap',

'longTap'

都是由我们的原生touch事件封装的。

四、常见的移动端问题

1、什么是Retina 显示屏,带来了什么问题

  retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个

  在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍

  那么,前端的应对方案是:

  设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2

  //例如图片宽高为:200px*200px,那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

  其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px

 .css{font-size:20px}

2、 百度禁止转码

  通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:

<meta http-equiv="Cache-Control" content="no-siteapp" />

3、移动端手机号码识别(IOS)

  在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:

  • 7位数字,形如:1234567
  • 带括号及加号的数字,形如:(+86)123456789
  • 双连接线的数字,形如:00-00-00111
  • 11位数字,形如:13800138000

  可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别:

<meta name="format-detection" content="telephone=no" />

  开启电话功能

<a href="tel:123456">123456</a>

  开启短信功能:

 <a href="sms:123456">123456</a>

4、 移动端邮箱识别(Android)

  与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:

<meta content="email=no" name="format-detection" />

  同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:

 <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

5、 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

        ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。

{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

6、 webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

7、 禁止文本缩放

当移动设备横竖屏切换时,文本的大小会重新计算(或者在内嵌浏览器中设置字体的大小),进行相应的缩放,当我们不需要这种情况时,可以选择禁止:

html {

  -webkit-text-size-adjust: 100%;

}

8、移动端禁止选中内容

如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:

.user-select-none {

  -webkit-user-select: none;

}

9、 如何禁止保存或拷贝图像(IOS)

通常当你在手机或者pad上长按图像 img ,会弹出选项存储图像 或者拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

img { -webkit-touch-callout: none; }

10、摇一摇功能

HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

11、 android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

12、移动端基础框架

zepto.js语法与jquery几乎一样,会jquery基本会zepto;

搭配

backbone underscore

http://daneden.github.io/animate.css/ 动画css

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

移动端布局攻略

作者:Tolonger 原文链接:https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外,rem布局占据了目前移...

4236
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

2141
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

1433
来自专栏前端知识分享

第64天:CSS常用命名规范,有用!

1283
来自专栏菜鸟前端工程师

html+css学习笔记011-表单

1043
来自专栏河湾欢儿的专栏

兼容问题(下)

每个浏览器不同的内核,不同的处理引擎,不同的渲染引擎就会导致写同一条样式的时候出现差异 这个现象叫做做兼容

952
来自专栏Coco的专栏

神奇的选择器 `:focus-within`

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1505
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1042
来自专栏编程

《小白HTML5成长之路35》再做一个顶部的提示信息

最近天气干燥,小白和老朱都感冒了,虽然状态不好,小白还是没有停止HTML5前进的脚步,他憋了一股劲一定要在2018年到来之前提高一个台阶。看到老朱来到办公室,小...

2199
来自专栏有趣的django

微信小程序实战–集阅读与电影于一体的小程序项目(三)

在文章详情页,点击播放音乐后,然后返回到文章列表页,再进到详情页,发现播放按钮是暂停状态,这是因为应用程序存在生命周期,下面就解决这个问题。

1933

扫码关注云+社区

领取腾讯云代金券