前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第135天:移动端开发经验总结

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

作者头像
半指温柔乐
发布2018-09-11 10:10:31
1.6K0
发布2018-09-11 10:10:31
举报
文章被收录于专栏:前端知识分享

一、移动端三种布局

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

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

  2、百分比自适应布局

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

  3、全屏自适应布局

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

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

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

代码语言:javascript
复制
*,
::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,那么写法如下

代码语言:javascript
复制
.css{width:100px;height:100px;background-size:100px 100px;}

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

代码语言:javascript
复制
 .css{font-size:20px}

2、 百度禁止转码

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

代码语言:javascript
复制
<meta http-equiv="Cache-Control" content="no-siteapp" />

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

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

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

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

代码语言:javascript
复制
<meta name="format-detection" content="telephone=no" />

  开启电话功能

代码语言:javascript
复制
<a href="tel:123456">123456</a>

  开启短信功能:

代码语言:javascript
复制
 <a href="sms:123456">123456</a>

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

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

代码语言:javascript
复制
<meta content="email=no" name="format-detection" />

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

代码语言:javascript
复制
 <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

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

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

代码语言:javascript
复制
{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

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

代码语言:javascript
复制
.css{-webkit-appearance:none;}

7、 禁止文本缩放

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

代码语言:javascript
复制
html {

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

}

8、移动端禁止选中内容

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

代码语言:javascript
复制
.user-select-none {

  -webkit-user-select: none;

}

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

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

代码语言:javascript
复制
img { -webkit-touch-callout: none; }

10、摇一摇功能

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

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

代码语言:javascript
复制
input::-webkit-input-speech-button {display: none}

12、移动端基础框架

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

搭配

backbone underscore

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-01-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、移动端三种布局
  • 二 、Box-sizing在移动端的使用
  • 三、 移动端事件
    • 1、Touch
      • 2、Event
        • 3、移动端事件框架
        • 四、常见的移动端问题
          • 1、什么是Retina 显示屏,带来了什么问题
            • 2、 百度禁止转码
              • 3、移动端手机号码识别(IOS)
                • 4、 移动端邮箱识别(Android)
                  • 5、 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
                    • 6、 webkit表单元素的默认外观怎么重置
                      • 7、 禁止文本缩放
                        • 8、移动端禁止选中内容
                          • 9、 如何禁止保存或拷贝图像(IOS)
                            • 10、摇一摇功能
                              • 11、 android 上去掉语音输入按钮
                                • 12、移动端基础框架
                                相关产品与服务
                                短信
                                腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
                                领券
                                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档