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

简介: 一、移动端三种布局  1、有最大、最小宽度的百分比自适应布局  适用场景:门户网站首页,图片较多的首页。  2、百分比自适应布局  适用场景:信息文字较多的网页,内容较多网页。  3、全屏自适应布局  适用场景:单页面网页,移动web app 页面。

一、移动端三种布局

  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

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

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

  设计稿切出来的图片长宽保证为偶数,并使用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
0
0
0
379
分享
相关文章
从零到一:我的编程之旅与技术感悟
【10月更文挑战第22天】这是一篇关于个人编程学习经历和技术感悟的文章。文章以通俗易懂的语言,讲述了作者从一个编程新手,通过不断学习和实践,逐渐成长为一名熟练的程序员的过程。文章不仅分享了学习编程的方法和技巧,还深入探讨了编程的本质和意义,对于想要学习编程的人来说,具有很好的启发和指导作用。
69 2
移动应用开发之旅:从零到精通
【8月更文挑战第30天】本文将带领读者踏上移动应用开发的奇妙旅程,从最初的构想到最终的实现。我们将探索不同的移动操作系统,理解它们的特点,并学习如何为这些平台开发应用程序。无论你是初学者还是有经验的开发者,这篇文章都会为你提供宝贵的见解和实用的技巧。让我们开始吧!
73 3
系统开发经验总结
系统开发经验总结
82 0
“技术开发最应该做什么?”,聊聊我在服务端开发5年的理解和收获
“技术开发最应该做什么?”,聊聊我在服务端开发5年的理解和收获
207 0
重学前端 1 # 前端发展史以及学习痛点
重学前端 1 # 前端发展史以及学习痛点
194 0
心得体会
学习到了诸多知识,提升了自己的能力
我的心得体会
我是一名大二的工业工程专业的大学生,我们学院这学期开设了以C++语言为载体来讲述有关面向对象编程方法的一门课程——面向对象编程。我怀抱着对技术的热爱与渴望,想革新自己以往面向过程式的编程思想以及追赶社会上“人人都学编程”的脚步。于是我选了这门编程课,听老师讲我们这门课是依托阿里云平台来进行教学的,于是乎在刚开课不久我就注册了我的阿里云账号。现在主要的编程语言是C++,目前通过上课的过程中学到了有关markdown文档和git控制的知识,听老师说阿里云飞天加速计划,学生可以免费申领具有一定期限的云服务器,便想加入飞天加速计划,希望自己的技术有进一步的提高并能学到更多的知识。
划重点,早预习:疫情下的在线教育大考 | 开发者必读(157期)
没有人能预料到,新冠肺炎疫情在这个寒假肆虐,教育部随即下发一纸“停课不停学”倡议,全国范围内学生涌入在线课堂、行业渗透率瞬间暴增十倍,同时一些从未想过的问题摆在了在线教育企业面前:能否为如潮水般涌来的新用户提供优质的服务?如何在高峰值流量下维持系统稳定?怎样处理好团队协作、组织流程与教务管理?在有限的人力之下,技术如何才能发挥更大的作用?