• 背景 近年来,随着智能手机的普及,移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧。本文旨在让读者以...

    背景

    这里写图片描述

    近年来,随着智能手机的普及,移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧。本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。

    基础准备

    首先我们要有HTML/HTML5、CSS/CSS3基础知识(会简单的切图就可以了) ,如果能懂点JS那就更好啦。

    其次我们要清楚一些基本概念,不然出去吹牛逼听不懂别人说的东西或者自己说出来是非常明显的错误就很尴尬啦,为了能自信满满的吹水,我们来了解下面几个基本概念吧。

    • 移动端网页开发
      在移动端表现良好的页面,如新浪网,腾讯新闻网,手机凤凰这些网站页面在移动端也有不错的表现。

    • 移动端web app开发
      简单来说就是在开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。或者更多的是如手机taobao,手机美团,手机微博等类似web app,他们没有很明显的使用一些native功能,但是交互、设计的和app类似的网页,它是要依托浏览器来查看的。当然近期行业内还推出了多种形式的类app/webapp应用技术,比如大家熟知的微信小程序、谷歌推出的PWA(获得与安卓原生应用同等权限)、DCloud公司推出的流应用(获得W3C及国内手机厂商支持)等。

    • hybrid app开发
      也叫【套壳开发】,简单来说就是通过写特定的代码生成跨平台的web app,类似react native,phonegap,cocos2d等。可以用一些前端native开发框架或者是在移动端网页的基础上打包生成app。

    基本概念有了,最后我们要有一张基于移动端尺寸的设计稿,比如750px,720px,640px等都可以。比如下面这张图。接下来我们就来实现这个移动端页面。

    设计稿

    动手实践

    HTML示例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
            <title>舰炮与鱼雷特权</title>
        </head>
    
        <body>
            具体布局就不展示了
        </body>
    </html>

    html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    device-width - 设备的宽度
    initial-scale - 初始的缩放比例  
    minimum-scale - 允许用户缩放到的最小比例   
    maximum-scale - 允许用户缩放到的最大比例  
    user-scalable - 用户是否可以手动缩放 

    当然这只是一种方案,其次是一些辅助优化功能,常用的有如下meta标签:

    <meta content="telephone=no,email=no" name="format-detection">
    //禁止自动识别电话号码和邮箱
    <meta content="yes" name="apple-mobile-web-app-capable">
    //苹果手机:会删除默认的工具栏和菜单栏,网站开启对web app程序的支持
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    //苹果手机:在web app应用下状态条(屏幕顶部条)的颜色,默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
    <meta name="apple-touch-fullscreen" content="yes" />
    //苹果手机:如果把一个web app添加到了主屏幕中,那么从主屏幕中打开这个web app则全屏显示
    <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
    //苹果手机:将应用添加到手机主屏幕,会有一个icon可以直接进入
    
    

    CSS示例

    //部分重置
    body {
        word-wrap: break-word;
        font: 16px/1.5 Helvetica, Arial;
        //这里是设置字体,Helvetica字体在移动端各系统都支持(都不支持微软雅黑)
        color: #333;
        -webkit-text-size-adjust: none; 
        //设置文本不会放大,普通网页在移动端打开文本是会跟随网页结构缩放的
    }
    body *{
        -webkit-tap-highlight-color: transparent;
        //在一些手机上,如iphone,点击按钮等元素会出现点击态的背景色,设置为透明就看不出来了
        -webkit-user-select:none;
        //设置元素内的文字及其子元素将不会被选中
    }
    //部分样式
    .pack-sub em{
      width:38px;
      height:20px;
      display: inline-block;
      margin-left: 3px;
      font-size: 14px;
      background-color: #ff599b;
      border-radius: 20px;
    }

    css中,关键点一是重置样式和PC端有点不同,二是css的数值应该是设计稿中的一半,以750px为例(因为最常见的iPhone6的屏幕尺寸为375px,设计稿是手机屏幕的两倍大小,所以css中的数值按设计稿一半计算)

    最终效果

    设计稿

    问题和优化

    细心的我们发现,目前的实现在iPhone6下是很友好的,但是在其他设备上,比如小屏的iPhone4或者类型更多的安卓手机,表现并不是很好。这时我们会去搜索移动端适配解决方案,有js+rem的方式,也有淘宝Flexible的解决方案,我们应该去了解并实践咯。
    传送门:
    移动web适配利器-rem
    使用Flexible实现手淘H5页面的终端适配

    移动端开发的优劣

    优势:
    移动端开发的优势简单来说就是兼容性更好了,基本上只需要针对webkit内核的浏览器做兼容就好了,而且本身这类浏览器对html5、css3的兼容性就比较高,所以PC端不太敢用的属性就大胆的用起来吧。
    移动端还可以使用很多设备接口来实现更好的交互效果,比如陀螺仪实现类似3D VR效果,多指操作实现图片缩放旋转,获取地理位置等。

    劣势:
    移动端目前设备类型特别多,移动端的适配比较难处理,移动端的事件也是一个难题,比如tap延迟,点击穿透等问题。

    扩展

    要想处理好移动Web开发,我们还需要很多知识储备,很多问题需要找到比较好的解决方案,下面列举一些常见问题及可供学习的资料。
    1.设备视口及像素比
    2.浅谈移动Web开发(上):深入概念
    3.移动端自适应方案
    4.移动端 Web 开发前端知识整理
    5.移动端事件介绍

    总结

    本文主要介绍了如何快速切入到移动Web开发,并介绍了开发中可能会遇到的常见问题,虽然没有具体介绍,因为这不是本文的主要目的,目的是希望读者在阅读之后对移动Web开发有个大致的了解,然后在实际开发工作中不断积累。
    本文介绍方式是根据我自己的学习方式来描述的,先实现一个DEMO,获得一点成就感之后才有勇气面对开发中无数的坑嘛!希望对大家有帮助!

    展开全文
  • 这一篇文章主要对移动端开发相关的基础知识点,进行总结。从移动端开发的一些概念、专有名词、缩放、viewport移动端事件、适配问题以及一些工作中沟通经常会用到这些方面来说一下移动端 1-移动端开发相关概念 ...

    引言

    这一篇文章主要对移动端开发相关的基础知识点,进行总结。从移动端开发的一些概念、专有名词、缩放、viewport移动端事件、适配问题以及一些工作中沟通经常会用到这些方面来说一下移动端

    1-移动端开发相关概念

    移动端特点

    移动端与 PC 端网页有所不同,有以下几个特点

    屏幕大小

    ​屏幕大小指屏幕的对角线的长度,单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
    在这里插入图片描述

    注意:

    • 英寸的英文为 inch , 英尺的英文是 foot
    • 1foot = 12inch 1inch=2.54cm

    屏幕分辨率

    屏幕分辨率是指屏幕横纵向上的像素点数。一般表示形式 x * y 或者 y * x 表示。例如 IPhone 6 的屏幕分辨率为 750 * 1334,华为 P30 的分辨率为 2340 * 1080。
    在这里插入图片描述

    注意

    • 屏幕分辨率是一个固定值,生产出来就固定了,无论手机屏幕还是电脑屏幕。
    • 屏幕分辨率与显示分辨率不同。计算机可以修改显示分辨率,信号传递给屏幕,屏幕会进行计算,在屏幕上显示。
    • 1080P 的分辨率是1920x1080
    • 2K 屏幕是单一方向分辨率具有约 2000 像素的显示设备。最标准的 2K 分辨率为 2048×1024

    几款手机的分辨率

    型号 分辨率
    IPhone 3GS 320 * 480
    IPhone 4 / 4s 640 * 960
    IPhone 5 / 5s 640 * 1136
    IPhone 6 / 7 / 8 750 * 1334
    华为 P30 1080 * 2340
    IPhone X 1125 * 2436

    像素相关

    物理像素 / 设备像素

    • 设备像素 / 物理像素是一个长度单位。 1 物理像素对应显示设备中一个微小的物理部件。
    • 设备像素是手机屏幕的一个参数,由手机制造商决定。
      在这里插入图片描述

    设备独立像素 / 设备无关像素

    • 设备独立像素,简称 DIP(device-independent pixel),又称为设备无关像素,是一个长度计量单位。
    • 设备独立像素也是手机屏幕的一个参数,由手机制造商决定。
    • 1 个设备独立像素可以认为是计算机坐标系统中的一个点,代表可以通过程序控制使用的虚拟像素。
      • 普通屏幕下 1 设备独立像素 等于 1 物理像素
      • 高清屏幕下 1 设备独立像素 等于 N 物理像素

    Retina 屏幕

    Retina 是苹果公司 2010 年推出的一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。

    在这里插入图片描述
    设备独立像素的出现,使得即使在高分辨率的屏幕下,也可以正常尺寸的显示元素,代码不受到设备的影响。

    几款手机的屏幕像素参数,点击这里查看更多

    型号 设备像素总和 设备独立像素总和
    IPhone 3GS 320 * 480 320 * 480
    IPhone 4 / 4s 640 * 960 320 * 480
    IPhone 5 / 5s 640 * 1136 320 * 568
    IPhone 6 / 7 / 8 750 * 1334 375 * 667
    HUAWEI P10 1080 x 1920 360 x 640
    IPhone X 1125 * 2436 375 * 812

    CSS 像素 / 逻辑像素

    CSS 像素是一个抽象的长度单位,单位 px,主要用来精确度量和控制 WEB 网页上的内容。

    • CSS 像素不能直接跟现实中的长度单位换算
    • CSS 像素主要用在 CSS 与 JS 中控制元素的大小

    位图像素

    位图像素也是一个长度单位。位图像素是栅格图像(如:png,jpg,gif等)最小的数据单元。
    在这里插入图片描述

    位图和矢量图

    • 位图图像是由称作像素(图片元素)的单个点组成的。放大后会失真。
    • 矢量图,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。放大后不会失真。软件有Adobe Illustrator,Sketch

    1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示

    像素之间的关系

    • CSS 像素 == 独立设备像素 == 逻辑像素 == DIP == 位图像素
    • 在一个标准的显示密度下(普通屏),一个 CSS 像素对应着一个设备像素,高清屏幕下一个 CSS 像素 等于 N 个物理像素

    像素密度

    屏幕上每英寸可以显示的像素点的数量,单位是 ppi (pixels per inch ),这里还有另一个单位 dpi(dots per inch),两个值的计算方式都一样,只是使用的场景不同。 描述屏幕属性时使用 ppi,开发过程中描述屏幕设备使用 dpi。
    在这里插入图片描述
    苹果曾经给出个一个标准:手机屏幕达到 300PPI、平板屏幕达到 220PPI、笔记本电脑屏幕达到 200PPI 即可认为是 Retina 屏幕。

    像素比 / N倍屏

    • 像素比(DPR dpr): 单一方向上设备物理像素和设备独立像素的比例。
      window.devicePixelRatio
    • 像素比的作用
      程序可以根据像素比来显示不同的图片,达到清晰显示网页的效果。
      @media screen and (-webkit-min-device-pixel-ratio: 2) {
      .logo {
          background-image: url('./image/logo@2x.png');
      }
      }
      
    • 注意:
      并不是所有的图片都这样处理,只需要处理那些页面布局需要的图片和图标即可

    视口

    PC 端

    在 PC 端,视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源。

    移动端

    移动端的视口与 PC 端不同,有三个视口

    • 布局视口
    • 视觉视口
    • 理想视口

    布局视口

    • 布局视口是用来放置网页内容的区域。
    • 一般移动设备的浏览器都默认定义一个虚拟的布局视口(layout viewport),用于解决早期的页面在手机上显示的问题。 视口大小由浏览器厂商决定,大多数设备的布局视口大小为 980px。
      document.documentElement.clientWidth 
      document.documentElement.clientHeight
      

    视觉视口

    • 视觉视口就是用户可见的区域。
    • 获取方式
      window.innerWidth
      window.innerHeight
      
    • 注:不缩放的情况下,视觉视口宽度 == 布局视口宽度。

    理想视口

    • 宽度与屏幕同宽的布局视口称为理想视口。 理想视口的好处
      • 用户不需要缩放和滚动条就能看到网站的全部内容。
      • 针对移动端的设计稿更容易开发。
    • 注意:理想视口不是真实存在的视口
    • 设置理想视口的方法
      <meta name="viewport" content="width=device-width" />
      // 或者
      <meta name="viewport" content="initial-scale=1.0" />
      // 合体
      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
      

    2-缩放

    PC 端

    放大时

    • 布局视口变小
    • 视觉视口变小
    • 元素的像素大小不变

    缩小时

    • 布局视口变大
    • 视觉视口变大
    • 元素的像素大小不变

    移动端

    放大时

    • 布局视口不变
    • 视觉视口变小

    缩小时

    • 布局视口不变
    • 视觉视口变大
      注意:移动端缩放不会影响页面布局

    真机测试流程(重点)

    真机测试是项目测试必要的一个流程,一定要掌握!!!

    • 闭防火墙
    1. webstorm -> ctrl + alt + s -> 搜索 debugger -> 修改端口并勾选两个多选框
    2. 使 PC 与手机处于同一个网络。手机连接电脑 wifi,或者电脑连接手机热点,两者在同一个 wifi 下最方便。
    3. cmd 查看电脑无线网卡的 IP(ipconfig)
    4. webstorm 在浏览器中预览文件,将 localhost 更改为 IP
    5. 打开草料网址 https://cli.im/ 将 URL 转化为二维码,手机扫描即可 😎

    3-viewport 控制

    • viewport 标签是苹果公司在 2007 年引进的,用于移动端布局视口的控制。
    • 使用示例
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no,maximum-scale=1.0, minimum-scale=1.0">
      

    viewport 相关选项

    - width  布局视口宽度
    - initial-scale  初始化缩放比例
    -  minimum-scale  最小缩放比例
    	- 这里通过微信来浏览器演示  苹果内置的和很多安卓的浏览器不可用  itools 实时屏幕
    - maximum-scale 最大缩放比例
    - user-scalable  设置是否允许用户缩放
    	-  苹果内置的浏览器不好使, 但是微信浏览器好使
    - viewport-fit   auto/contain/cover
    

    width

    width 值可以是数字,也可以是设备宽度表示 device-width,这样可以得到完美视口

    initial-scale

    • initial-scale 为页面初始化时的显示比例。
    • scale = 屏幕宽度独立像素 / 布局视口宽度。
    • 注意:
      • chrome 测试该参数会有偏差,真机测试
      • initial-scale = 1.0 也可以得到完美视口
      • initial-scale 会影响布局视口和视觉视口的大小
      • width 与 initial-scale 同时设置时,会选择尺寸较大的那个

    minimum-scale

    • 设置允许用户最小缩放比例。
    • minimum-scale = 屏幕独立像素宽度 / 视觉视口

    maximum-scale

    • 设置允许用户最大缩放比例,苹果浏览器 safari 不认识该属性
    • maximum-scale = 屏幕独立像素宽度 / 视觉视口

    user-scalable

    是否允许用户通过手指缩放页面。苹果浏览器 safari 不认识该属性。

    viewport-fit

    设置为 cover 可以解决『刘海屏』的留白问题
    在这里插入图片描述

    4-移动端事件

    事件类型

    移动端事件列表

    • touchstart 元素上触摸开始时触发
    • touchmove 元素上触摸移动时触发
    • touchend 手指从元素上离开时触发
    • touchcancel 触摸被打断时触发

    这几个事件最早出现于IOS safari中,为了向开发人员转达一些特殊的信息。

    应用场景

    • touchstart 事件可用于元素触摸的交互,比如页面跳转,标签页切换
    • touchmove 事件可用于页面的滑动特效,网页游戏,画板
    • touchend 事件主要跟 touchmove 事件结合使用
    • touchcancel 使用率不高
    • 注意:
      • touchmove 事件触发后,即使手指离开了元素,touchmove 事件也会持续触发
      • 触发 touchmove 与 touchend 事件,一定要先触发 touchstart
      • 事件的作用在于实现移动端的界面交互

    事件绑定

    • 方式一
      box.ontouchstart = function(){
      console.log('touch start')
      }
      
    • 方式二
      box.addEventListener('touchstart', function(){
      console.log('touch start')
      })
      

    点击穿透

    • touch 事件结束后会默认触发元素的 click 事件,如没有设置完美视口,则事件触发的时间间隔为 350ms 左右,如设置完美视口则时间间隔为 5ms 左右。
    • 如果 touch 事件隐藏了元素,则 click 动作将作用到新的元素上,触发新元素的 click 事件或页面跳转,此现象称为点击穿透

    解决方法

    • 阻止当前元素事件的默认行为。
      cls.addEventListener('touchstart', function(e){
      e.preventDefault();
      })
      
    • 阻止顶级元素事件的默认行为,可以增加一个包裹元素绑定,也可以给 document 和 window 绑定,不过需要关闭被动模式
      document.addEventListener('touchstart', function(e){
      	e.preventDefault();
      }, {
      	passive: false
      });
      
    • 使用非链接的元素代替 a 标签,并绑定 touchstart 事件
      <div class="item">
      <div data-href="http://m.atguigu.com"><img src="holder.js/60x60?bg=#a76"></div>
      </div>
      
    • 延时隐藏遮盖元素
      setTimeout(function(){
      	el.style.display = 'none';
      }, 400)
      

    页面跳转的选择

    移动端页面跳转可以使用 a 链接,也可以使用 touchstart 事件来触发 JS 代码完成跳转

    • 效率上,touchstart 速度更快
    • SEO 优化上, a 链接效果更好

    浏览器默认行为

    这里指的浏览器默认行为主要有两个

    • 滑动露白
    • 页面缩放

    为什么要阻止这些默认行为

    这样可以让网页在不同的浏览器都有一样的表现。

    如何阻止默认行为

    可以给 document 绑定 touchstart 事件,并阻止默认行为,不过需要关闭被动模式。这里推荐创建一个包裹元素,绑定 touchstart 事件并阻止默认行为。

    • CSS 代码
      html, body, #app {
      width: 100%;
      height:100%;
      overflow: hidden;
      }
      
    • HTML 代码
      <body>
      <div id="app">
      .
      .
      .
      </div>
      </body>
      
    • JS 代码
      app.addEventListener('touchstart', function(e){
      e.preventDefault();
      })
      

    后遗症

    最外层元素阻止了 touchstart 默认行为之后,会产生一些意外现象😭

    • 链接失效
    • 内容无法选择
    • form 元素无法获得焦点

    灵丹妙药

    产生『后遗症』的原因在于 touchstart 阻止了默认行为,后续所有的操作都已经失效。解决问题只需要给目标元素绑定 touchstart 事件并阻止事件冒泡,这样当前操作的默认行为仍然可用。👌

    var link = document.getElementsByTagName('a')[0];
    link.addEventListener('touchstart', function(e){
    	e.stopPropagation();
    })
    

    注: 不是非要阻止浏览器的默认行为,这是一种极端要求的应对方法,正常只需要设置完美视口即可。

    事件对象属性

    touch 事件对象中有 3 个非常重要的属性

    • changedTouches
    • targetTouches
    • touches

    touchstart 事件

    在 touchstart 事件中

    • changedTouches 为当前在元素上同时滑动的触点对象数组。
    • targetTouches 为滑动时,当前元素上的触点对象数组
    • touches 为滑动时,当前屏幕上所有的触点对象数组

    touchmove 事件

    在 touchend 事件中

    • changedTouches 为当前在元素上同时抬起的触点对象数组。
    • targetTouches 为结束时时,当前元素上的触点对象数组
    • touches 为结束时时,当前屏幕上所有的触点对象数组
      触摸结束的位置,必须要使用 touchend 事件中的 changedTouches 来获取

    触点对象

    每一个触点对象都包含一些位置信息,其中包括

    • clientX 相对可视区域左侧的偏移
    • clientY 相对可视区域顶侧的偏移
    • pageX 相对文档左侧的偏移
    • pageY 相对文档顶部的偏移

    5-小案例(未完待续—后续补上)

    • 触摸拖拽
    • 竖向滑屏
    • 画板

    6-适配

    移动端设备的屏幕尺寸繁多,要想让页面的呈现统一,需要对不同尺寸的设备进行适配。适配的方式主要有两种

    • viewport 适配
    • rem 适配

    viewport 适配

    拿到设计稿之后,设置布局视口宽度为设计稿宽度,然后量尺寸进行布局即可。

    <meta name="viewport" content="width=375, user-scalable=no">
    

    操作步骤:

    1. 上传 PSD 到蓝湖
    2. 设置 viewport 标签 width=375 (以设计稿为准)
    3. 根据设计稿测量尺寸,编写 CSS

    rem适配

    em 和 rem

    em 和 rem 都是 CSS 中的长度单位。而且两个都是相对长度单位,不过两个有点区别

    • em 相对的是父级元素的字体大小
    • rem 相对的是根元素的字体大小

    核心是等比缩放

    rem 适配的策略有以下几种

    • 方法一
      先按照 IPhone 6 进行页面布局,再进行适配
      1. 完美视口设置
      2. 设计稿总宽 375 布局
      3. 设置 font-size 100px 尺寸转为 rem
      4. 增加 JS 代码进行页面适配
    document.documentElement.style.fontSize = document.documentElement.clientWidth*100/375+'px';
    
    • 方法二
      编写时按照 IPhone 6 直接使用 rem 单位进行布局
      1. 完美视口设置
      2. 设计稿总宽 375 布局
      3. 以 font-size 100px 进行尺寸换算,设置 rem
      4. 增加 JS 代码进行页面适配
    document.documentElement.style.fontSize = document.documentElement.clientWidth*100/375+'px';
    
    • 方法三
      选择一个设计稿宽度的比例尺寸作为根元素的字体大小
      1. 完美视口设置
      2. 通过 JS 设置页面的根元素字体大小。可以除以 10 也可以除以其他的数字
    document.documentElement.style.fontSize = document.documentElement.clientWidth/10+'px';
    
      1. 根据设计稿使用 rem 设置元素大小
      @rem: 375/10rem;
      #banner {
      width: 335/@rem;
      height: 144/@rem;
      background: #225094;
      margin: 97/@rem auto 0px;
      }
      

    1px 边框问题

    高清屏幕下 1px 对应更多的物理像素,所以 1 像素边框看起来比较粗,解决方法如下

    方法一

    1. 边框使用伪类选择器,或者单独的元素实现。例如底部边框
      .box2::after{
      content:'';
      height:1px;
      width:100%;
      position:absolute;
      left:0;
      bottom:0;
      background:#000;
      }
      
    2. 在高清屏幕下设置
      @media screen and (-webkit-min-device-pixel-ratio: 2){
      .box2{
          transform:scaleY(0.5);
      	}
      }
      
      @media screen and (-webkit-min-device-pixel-ratio: 3){
      .box2{
          transform:scaleY(0.33333);
      	}
      }
      

    方法二

    1. rem 页面布局
      var fontSize = 50;
      document.documentElement.style.fontSize = '50'+px;
      
    2. 元素的边框设置为 1px
    3. 通过 viewport 中的 initial-scale 将页面整体缩小
      var dpr = window.devicePixelRatio;
      viewport.setAttribute('content', 
                        'user-scalable=no, initial-scale='+1/dpr + ',user-scalable=no');
      
    4. 重新设置根元素字体
      document.documentElement.style.fontSize = fontSize * dpr + 'px';
      

    7-附录

    chrome 插件安装

    1. 下载 crx 插件文件,如 caoliao.crx
    2. 更名为 .rar 后缀, 例 caoliao.rar
    3. 解压文件,得到 caoliao 文件夹
    4. chrome 浏览器 -> 右上角 ┆ -> 更多工具 -> 扩展程序 -> 右上角开启开发者模式 -> 左侧已解压的扩展程序 -> 选择 caoliao 文件夹 👌

    webstorm 配置 less 解析

    1. 下载安装 nodejs 。下载地址 http://nodejs.cn/download/
    2. 命令行下安装 lessc
    npm install less -g
    
    1. webstorm 配置文件监控
    ctrl + alt + s 打开设置  ->  搜索 watcher -> 点击右上角 + 号 -> 选择 less -> 确定👌
    
    1. 创建 less 文件,就会自动生成 css 文件

    8-总结

    • 相信不用多说了,一万多字的详解移动端开发,希望每一个知识点可以帮助到你
    • 愿你在这个代码繁杂、头发渐秃的编码世界里,可以温暖疲倦的自己,坚持学习

    有时候你不努力一下,就不知道什么叫绝望。

    『传送门』☛ 什么是混合移动App开发【重点学习系列—干货十足–一文详解】

    『传送门』☛ 什么是微信小程序【重点学习系列—干货十足–一文详解】

    展开全文
  • 从去年下半年开始,就开始听到各种言论,例如 “Android 开发凉凉”、“移动端开发没出路了赶紧转行”、“要被 XXX 替代了” 等等,充分反映了大家焦虑的心态。移动端开发真的要凉凉了吗?我也经常和朋友聊起这个...

    点击上方“开发者技术前线”,选择“置顶或者星标” 属于你的文章一触即达!

    我是一名 Android 开发者。从去年下半年开始,就开始听到各种言论,例如 “Android 开发凉凉”、“移动端开发没出路了赶紧转行”、“要被 XXX 替代了” 等等,充分反映了大家焦虑的心态。移动端开发真的要凉凉了吗?我也经常和朋友聊起这个话题,今天我决定写下自己的一些看法,供大家参考。

    现状

    移动端开发的现状是什么?我们可以从自己写的代码中寻找线索。以 Android 为例,很多大公司的移动端开发者写的最多的代码是这样的:

    LinearLayout layout = new LinearLayout();
    layout.addView(xxxx);
    ...
    

    或者也许是这样的:

    public class XXXView extends RelativeLayout {

    public XXXView(Context context) {
        this(context, null);
    }
    
    public XXXView(Context context,
            @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    
    public XXXView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    
    private void initView() {
        LayoutInflater.from(getContext()).inflate(R.layout.xxxlayout, this, true);
        ...
    }
    
    public void setData(XXX xxx) {
      ...
    }
    

    }
    又或者是对着 xml 标签做出各种骚操作——UI 开发。没错,如今移动端技术栈已经愈发趋于成熟完善,对业务来说,就连大公司的工程师也是在做 UI 的展示逻辑。大公司产品相对比较完善,后端管控了大部分业务逻辑,客户端做的就是取到后端的数据,然后通过setText(xxx)展示出来,然后通过接口返回的 Boolean 值来判断 View 显示还是隐藏。我听到很多人说,工作几年感觉自己没什么提升,天天都在堆代码,随便找个刚毕业的学生也能分分钟替代自己,于是就很焦虑。那对于工作几年的人来说,要想尽可能不让自己过早的被替代、被淘汰,就需要选一个有潜力的有前景的领域深挖。

    标题移动端开发的未来在哪里?

    动态化

    在聊动态化之前,我们先聊聊 Android 的插件化。前两年,插件化火起来了。为什么火?因为可以实现 Android 应用不发版本的同时动态上线需求,同时热修复还可以动态的修复线上出现的 bug。但是插件化存在最大的问题是什么呢?兼容性。Android 机型太多太复杂,插件化框架难免会涉及到系统 API 的 hook,兼容性问题就出现了,开发者会看到莫名其妙的错误上报上来却束手无策。随着 Android 版本的迭代更新,插件化这条路越来越不好走,Android P 给了开发者们一个信号:别随便 hook 系统 API 了,Google 要开始收口整顿了。插件化这条路注定无法一直走下去,于是开发者们另辟蹊径。最开始是继续用 H5 混合开发的方式,例如老牌 Hybrid 框架 Cordova,但是性能不尽人意。

    这时候 Facebook 开发出了一个跨时代的框架:React-Native。它提供了一个全新的思路:通过 jscore 进行 js 解析,使用原生的 View 进行渲染,提供桥机制调用原生的能力。React-Native 是第一个真正的高性能的动态化框架,它的出现让 Web 前端和客户端的界限迅速变得模糊。随之而来的是各大公司的自研框架,例如阿里巴巴的 Weex 和美团点评的 Picasso 框架。React-Native 只提供了 Android 和 iOS 的双端支持,Weex 扩展了思路,提供的 Web 端的支持,一个是 React 语法糖,一个是 Vue 语法糖。Picasso 又不一样,Picasso 是纯 TS,DSL 语法树,写法实在太简单,又准备在三端的基础上提供小程序端的支持。

    今年 GMTC 大会,Flutter 发布了第一个预览版,阿里巴巴闲鱼团队已经在闲鱼 APP 中使用了 Flutter 技术。Flutter 三年前开始开发,直到今年才有第一个 beta 版本。通过 Dart 编写 APP,然后编译成机器码同时运行在 Android 和 iOS 上,做到了原生跨平台,Hot Reload,性能很不错,可定制性也非常强,连封装的系统层 Dart 代码都能改。提供了 Web、iOS、Android、React-Native 开发者学习 Flutter 的入门文档,也是今年移动端少数的几个比较火的热点之一。它的思路不同于 React-Native,是一种全新的思路,目前我对 Flutter 持乐观态度。

    支付宝的动态方式不同于以上所有,它是完全基于自己的 H5 容器进行 Hybrid 开发,不过由于内核也是自研的(UC 内核),所以性能各方面都比原生的 WebView 好,支付宝里非常多的页面都是基于 H5 容器开发的,包括支付宝小程序,这也算是一种动态化的方式吧,只不过研发成本太高:自研 WebView 内核。

    目前来看,动态化的三驾马车已经初步形成:

    React-Native 为首的 jscore(v8)桥通信动态化方案
    自研 WebView 内核,H5 容器化方案
    Flutter(我觉得 Flutter 正在发力争取第三驾马车的位置)

    动态化改变了移动开发的方式,模糊了 Web 前端和客户端的界限,让越来越多的人认识了什么是 “大前端”。如果有经验的开发者们对这个方向进行深入研究,五年内,应该不会被淘汰了(笑)。

    移动端机器学习

    毫无疑问,移动端机器学习从去年年底就开始火起来了,TensorFlow 也推出了移动端框架,很多应用都开始在移动端部署机器学习模型,例如相机类应用(faceu)、电商类应用(唯品会)等,包括离线的机器学习。如果深挖这个方向,我觉得十年内不会被淘汰。当然了,难度也不小。

    AR & VR

    从支付宝的 AR 抢红包、QQ 的 AR 踢球等玩法被越来越多的人体验,AR 走进了人们的视野。对于广告引流玩法来说,AR 无疑是能带来巨大收益的。月初大众点评亲子上线了 “亲子奇妙日” 活动,就是基于大头儿子小头爸爸的 AR 玩法。那么开发 AR 引擎的移动开发者自然成了香饽饽,目前 AR 主要应用的领域还是广告变现,不过很多公司也找到了 AR 的一些落地场景,比如卖家具的电商公司可以通过 AR 技术让用户在购买之前就能看到实物在自己家里到底能不能放得下,这能极大的提升用户的购买体验。如果是研究 OpenGL、计算机图形学的移动开发者,可以往 AR 引擎开发方向发展,非常有前景。

    VR 同理

    移动端音视频

    这个领域最火的产品当之无愧是抖音了,就连我自己都天天刷抖音。除了抖音,还有各大视频应用,都需要音视频开发领域的专业开发人员,图像处理、滤镜、裁剪等等骚操作都是需要专业的音视频开发知识才能做出来的,研究 OpenGL、计算机图形学的移动开发者在这个领域也有很大的优势。据我所知,这方面人才现在缺口依然很大,各大公司求贤若渴,如果在这方面有经验并且愿意深挖的同学,自然是各大公司的香饽饽啦。

    移动端区块链

    区块链,今年最火的技术没有之一。从人人都在谈比特币到人人都在谈区块链,可以看出区块链技术已经被越来越多人熟知。无数区块链公司如雨后春笋般的冒出,连大公司们也按捺不住开始涉足区块链领域。对于移动端来说,区块链应用最多的还是数字钱包。但是未来移动端区块链一定会有更多的落地应用,例如 Status。区块链今年大火,移动端的区块链应用还没开始火,但是也不远了。如果有移动开发同学对区块链方向感兴趣的,可以开始研究起来了。如果要学习智能合约开发的同学,我推荐一个非常好的网站:Cryptozombies,绝对是入门 solidity 智能合约开发的精品。目前移动端的区块链人才还不多,各大公司也没有在招,但是两三年内,应该就会爆发了,现在还在探索落地场景的阶段,也给了对区块链技术感兴趣的移动开发同学学习的时间。改变世界的技术了解一下?

    移动基础框架

    UI 未来可能都会被动态化技术接管,但是移动基础框架不会。但凡要开发一个 APP,网络请求、日志处理、数据库处理、缓存、Push 等框架都是不可或缺的,这部分和 UI 关系不大,又是 APP 的命脉所在。只要 APP 存在,基础框架就存在。有同学可能要说了,我用 okhttp 分分钟写一个网络请求出来,没错,这是 okhttp 已经帮我们做好了很多事。什么是框架?用一句话总结,我的理解就是:

    一种可以让能力差别较大的开发者写出功能、性能差不多的代码的库

    不知道大家能不能理解这种说法,我举个例子:如果使用 HttpUrlConnection 来写网络请求,可能不同能力的开发者写出来的代码不一样,网络请求的性能和效果也不一样。但是如果使用了 okhttp 库,只要看一看 okhttp 的文档,新手和老手写出来的代码估计差不多,性能和效果也差不多,这就是框架做出的最大的贡献。在这些框架的基础上,P5 写的代码可能和 P6、P7 区别不会多大。然而,这些框架总要有人开发,开源的框架往往不能满足公司业务的需求,需要自研基础框架。尤其是 BAT、TMD 六家公司,移动端框架有大部分都是自研的,越来越多的公司也开始自研,所以如果是在这个方向有经验的移动开发者,在 APP 被淘汰之前,应该都不会被淘汰。这方面对移动开发者的知识深度和广度都要求相对较高,需要沉淀和学习。

    Android 工具类应用

    这个就比较特殊了,这类应用我举个例子:360 手机助手。对于 Android 用户来说,清理内存、清理垃圾等已经成为了一种习惯,这方面应用的开发自然是不可少的,而且非常考验对 Android 知识的深度,你们懂得。

    结语

    上面六个(七个)移动端开发方向,是我总结出来的有潜力有前景的方向,各位移动开发同学可以参考,可以选择一个方向进行深挖,相信一定会有收获。嘴上焦虑是没有意义的,最好的办法就是付出行动。积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

    作者:美团立成
    转载声明:本文转载自「InterestDriven」

    第一时间获取技术文章请关注微信公众号!

    开发者技术前线

    展开全文
  • 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina...

    对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。

    viewport(视口) 3个视口 layout viewport(布局视口):CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。 可以通过document.documentElement.clientWidth来获取。 visual viewport(视觉视口,即用户实际看见的部分):屏幕上显示的网页区域的尺寸,会被缩放影响,可以通过window.innerWidth来获取。 ideal viewport(完美视口):完美适配移动设备的viewport,它的宽度等于移动设备的屏幕宽度。有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口需要通过viewport meta标签来进行相应的设置。 像素 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多,同一时间你可以看到的就越多。 设备物理像素 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。 CSS像素:px(设备独立像素) 逻辑像素,浏览器使用的抽象单位(之所以叫抽象单位,是因为其可以根据不同的设备和不同的关系来变大变小,所以称为抽象单位)为Web开发者创造的,在CSS和JavaScript中使用的一个抽象的层。px是相对长度单位,相对的是设备物理像素(device pixel) 注意:在旧的屏幕上,当缩放程度为100%时,一个CSS像素等于一个设备像素。但当在高密度屏幕上,例如苹果的视网膜屏幕,一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度,一个CSS像素会变得明显比一个设备像素小。 举个例子: 当给一个元素设置width:200px时,到底会发生什么事情? 这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于屏幕的特性(是否是高密度)和用户进行的缩放。 用户放大得越大,一个CSS像素覆盖的设备物理像素就越多。因此,这个元素不一定会跨越200个设备物理像素。例如:在苹果的视网膜屏幕上,视网膜屏幕的像素密度是普通屏幕的两倍,那么这个元素就跨越了400个设备物理像素。如果用户放大,它将跨越更多的设备物理像素。 再比如以iphone6为例: 设备宽高为375×667,可以理解为设备独立像素(或CSS像素)。 其dpr为2,根据上面的计算公式,其设备物理像素就应该×2,为750×1334。

    位图像素 一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。 理论上:1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。 在普通屏幕下是没有问题的,但是在retina屏幕下就会出现位图像素点不够,从而导致图片模糊的情况。对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊。 所以,对于图片高清问题,比较好的方案就是两倍图片(@2x)。 如:200×300(css pixel)img标签,就需要提供400×600的图片。 如此一来,位图像素点个数就是原来的4倍,在retina屏幕下,位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例,图片自然就清晰了(这也解释了之前留下的一个问题,为啥视觉稿的画布大小要×2?)。

    屏幕尺寸 屏幕尺寸:指屏幕的对角线的长度,单位是英寸。

    设备像素比(device pixel ratio) 设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到: 设备像素比 = 设备物理像素 / 设备独立像素 计算公式: 1px = (dpr)^2dp; 获得设备像素比后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(33)个设备像素显示1个CSS像素。 在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配 为什么iPhone5是320px586px? 就是因为其dpr = 2 dpr = 2表示一个CSS像素等于4个物理像素 所以:640dp1136dp = 320px*568px

    iphone5对外宣称的640*1136是物理像素,而我们实际开发中用的px是逻辑像素。

    DPI:打印机每英寸可以喷的墨汁点 PPI(pixel per inch):屏幕每英寸的像素数量,即单位英寸内的像素密度 PPI越高,像素数越高,图像越清晰。 ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。 但是可视度越低(小),系统默认设置缩放比越大 Retina屏(高清屏):dpr都是大于等于2

    meta标签

    标签有很多种,而这里要着重说的是viewport的meta标签,其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大。 手机浏览器是把页面放在一个虚拟的”视口”(viewport)中,视口可大于或小于手机屏幕的可视区域,一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。 设置页面窗口自动调整到设备宽度,并禁止用户及缩放页面
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no" />
    复制代码

    上述属性基本含义:

    width=device-width 用来指定 layout viewport(布局视口) 的大小,device-width 为设备的宽度。如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为浏览器默认值。如:iPhone为980px。

    <meta name="viewport" content="width=device-width" />
    复制代码

    这样一来layout viewport将成为ideal viewport(完美视口),因为layout viewport宽度与设备视觉视口宽度一致了。 除此之外,我们还可以通过设置initial-scale=1来实现ideal viewport。

    <meta name="viewport" content="initial-scale=1" />
    复制代码

    initial-scale – 初始的缩放比例 minimum-scale – 允许用户缩放到的最小比例 maximum-scale – 允许用户缩放到的最大比例。1.0表示不缩放 user-scalable – 用户是否可以手动缩放,no表示不可以手动缩放

    忽略将页面中的数字识别为电话号码:

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

    忽略Android平台中对邮箱地址的识别:

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

    给页面设置最大宽度和最小宽度 如果在页面中我们使用rem结合js动态计算font-size值来实现多屏幕适配,这种方式可以无限适配最大和最小的终端屏幕。但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此,我们需要给页面设置最大的宽度和最小宽度。 比如:

    {
        max-width:640px;
        min-width:320px;
    }
    复制代码

    line-height属性的问题 line-height 的一个主要作用是:使得文本在父级元素中垂直居中。 属性值:

    normal 默认。设置合理的行间距。 number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父元素继承 line-height 属性的值。 lineheight属性很有用,但是也存在一些问题:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>lineheight</title>
        <style type="text/css">
            .box{
                font-size: 100px;
                border: 1px solid red;
                /*line-height: 100%;*/
            }
        </style>
    </head>
    <body>
    <div class="box">我是超大字体</div>
    </body>
    </html>
    复制代码

    从上图,我们发现字体和父元素上下之间有点小间距。这里我们可以通过给父元素设置line-height:100%来解决这个问题。 上下的小间距是由于line-height 与 font-size 的计算值之差造成的。当设置为line-height 的值为100%的时候,line-height的值就等于 font-size的尺寸,此时的空白间距为0。

    小知识点 拨打电话代码:

    <a href="tel:1234567890">打电话给:1234567890</a>
    复制代码

    发短信代码:

    <a href="sms:1234567890">发短信给:1234567890</a>
    复制代码

    调用手机系统自带的邮件功能代码:

    <p><a href="mailto:dlut123@126.com">发电子邮件</a></p>
    复制代码

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局

    调整html元素大小的值 有css与js两种方式 css方式:

    html { 
    font-size: calc(100vw / 3.75); 
    }
    复制代码

    除以3.75这里是以iphone6为设计稿为标准的,100vw表示设备宽度。为了使得html的字体大小为100px,这样我们在换算的时候,1px 就是0.01rem,就很方便我们计算。 js方式: 我们只需要监听resize事件即可

    document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px';
    $(window).on('resize', function() {
       document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
    })
    复制代码

    为了避免在一些手机浏览器上不支持calc,vm这些CSS3新属性,在实际应用中最好还是使用js方式。

    相关参考博文:

    移动端高清、多屏适配方案

    移动前端第一弹:viewport详解

    两个viewport的故事(第一部分)

    移动前端开发之viewport的深入理解

    深入了解viewport和px

    走向视网膜(Retina)的Web时代

    viewports剖析

    利用视口单位实现适配布局


    展开全文
  • 移动端开发注意事项

    2019-03-16 15:49:59
    移动端开发注意事项

    首先了解一下移动端、PC端的区别

    1. PC端在开发过程中考虑的是浏览器兼容性,移动端开发中考虑的是手机兼容性问题,做移动端开发,更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化;
    2. 在部分事件的处理上,移动端自然是偏向于触屏的,另外包括移动端弹出的手机键盘该如何处理,这样的问题在PC上肯定不会遇到,但在移动端,如果你没有经验,处理起来是相当麻烦的;
    3. 布局上,移动端开发是要做到页面布局自适应的,而PC端页面布局的比例会相对固定
    4. 在动画效果处理上,PC端要考虑IE的兼容性,通常用JS做动画的通用性会好一些,但相比CSS3却牺牲了较大的性能,而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3,既简单,效率又高
    5. 微信端文章分享的接口,title、description、以及icon图标的配置需要进行了解
    6. 百度地图的API
    7. 一般pc用jquery,移动端用zepto
    zepto与jquery两者相同点

    Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件大小,只有8k多,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有,Zepto中还有一些jQuery中没有的。另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto。你可用同样的方式重用jQuery中的很多方法,也可以方面地把方法串在一起得到更简洁的代码,甚至不用看它的文档。

    两者区别

    1,针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的,这不是Zepto的开发者Thomas Fucks在跨浏览器问题上犯了迷糊,而是经过了认真考虑后为了降低文件尺寸而做出的决定,就像jQuery的团队在2.0版中不再支持旧版的IE(6 7 8)一样。因为Zepto使用jQuery句法,所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中,而其他浏览器则能享受到Zepto在文件大小上的优势,然而它们两个的API不是完全兼容的,所以使用这种方法时一定要小心,并要做充分的测试。
    2,Dom操作的区别:添加id时jQuery不会生效而Zepto会生效。
    (function($) {
    $(function() {
    var $insert = $(‘

    jQuery 插入

    ’, {
    id: ‘insert-by-jquery’
    });
    insert.appendTo(insert.appendTo((‘body’));
    });
    })(window.jQuery);
    //

    jQuery 插入


    Zepto(function($) {
    var $insert = $(‘

    Zepto 插入

    ’, {
    id: ‘insert-by-zepto’
    });
    insert.appendTo(insert.appendTo((‘body’));
    });
    //

    Zepto 插入

     
    3,事件触发的区别:使用 jQuery 时 load 事件的处理函数不会执行;使用 Zepto 时 load 事件的处理函数会执行。
    (function($) {
       $(function() {    
           $script = $('<script />', {
           src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
               id: 'ui-jquery'
           });
           $script.appendTo($('body'));
           $script.on('load', function() {
               console.log('jQ script loaded');
           });
       });
    })(window.jQuery);
    Zepto(function($) {  
       $script = $('<script />', {
           src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
           id: 'ui-zepto'
       });
       $script.appendTo($('body'));
       $script.on('load', function() {
           console.log('zepto script loaded');
       });
    });
    

    4,事件委托的区别:
    var $doc = $(document);
    $doc.on(‘click’, ‘.a’, function () {
    alert(‘a事件’);
    $(this).removeClass(‘a’).addClass(‘b’);
    });
    $doc.on(‘click’, ‘.b’, function () {
    alert(‘b事件’);
    });
    在Zepto中,当a被点击后,依次弹出了内容为”a事件“和”b事件“,说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中,document上所有的click委托事件都依次放入到一个队列中,点击的时候先看当前元素是不是.a,符合则执行,然后查看是不是.b,符合则执行。而在jQuery中,document上委托了2个click事件,点击后通过选择符进行匹配,执行相应元素的委托事件。
    5,width()和height()的区别:Zepto由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css(‘width’)返回加border等的结果;jQuery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)。
    6,offset()的区别:Zepto返回{top,left,width,height};jQuery返回{width,height}。
    7,Zepto无法获取隐藏元素宽高,jQuery 可以。
    8,Zepto中没有为原型定义extend方法而jQuery有。
    9,Zepto 的each 方法只能遍历 数组,不能遍历JSON对象。
    10,Zepto在操作dom的selected和checked属性时尽量使用prop方法,在读取属性值的情况下优先于attr。Zepto获取select元素的选中option不能用类似jQuery的方法 (option[selected]),selectedcss使(&#x27;option[selected]&#x27;),因为selected属性不是css的标准属性。应该使用(‘option’).not(function(){ return !this.selected })。
    10,Zepto不支持的选择器:
    在这里插入图片描述

    下面我们进入正题,移动端开发注意事项

    一、meta的使用

    1、
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览

    2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉:

    
        <meta name="msapplication-tap-highlight" content="no">
    
    

    3、忽略页面的数字为电话,忽略email识别

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

    4、下面的meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

    <meta content="yes" name="apple-mobile-web-app-capable">
    

    5、下面的meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    

    二、自适应布局模式

    在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。
    1.布局使用百分比:

    不同的手机有着不同的分辨率,这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素,因为子元素的百分比高度是根据父元素的高度来确定的,当父元素的高度为不确定值时,或者说父元素的高度未定义时,子元素的高度百分比将没有用(没有参照物)。所以只有设置了父元素的高度,子元素的高度百分比才会有用。

    2.em与rem:
      em是根据相对单位,不是固定的,他会继承父级元素的字体大小,若没有父级则em的相对基准点为浏览器的字体大小,浏览器的字体默认为16px,因此若无父级元素,相对于浏览器大小:Xem=X*16px;
    rem是css3新增属性,是完全相对于HTML根元素大小设定的,默认为10px,因此无论父级字体大小,1rem=10px。

    3.栅格布局:
      box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。

    4、wap页面有img标签,记得加上display:block;属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。

    5、有关Flexbox弹性盒子布局一些属性
      1、不定宽高的水平垂直居中
      .xxx{
        position:absolute;
        top:50%;
        left:50%;
        z-index:3;
        -webkit-transform:translate(-50%,-50%);
        border-radius:6px;
        background:#fff;
      }
      2、[flexbox版]不定宽高的水平垂直居中
      .xx{
        justify-content:center;//子元素水平居中,
        align-items:center;//子元素垂直居中;
        display:-webkit-flex;
      }
    三、针对适配等比缩放的方法:

    @media only screen and (min-width: 1024px){
      body{zoom:3.2;}
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
      body{zoom:2.4;}
    }
    或如:

    @media all and (orientation : landscape) {

    h2{color:red;}/横屏时字体红色/

    }

    @media all and (orientation : portrait){

    h2{color:green;}/竖屏时字体绿色/

    }
    四、学会使用webkit-box

    如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。
    详情参考https://www.cnblogs.com/cainiaoz/p/4148042.html
    五、文本的处理

    1、关闭iOS键盘首字母自动大写

    2、//单行文本溢出

    .xx{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }
    3、//多行文本溢出
      .xx{
        display:-webkit-box !importmort;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;(数字2表示隐藏两行)
      }

    4、html {
      -webkit-text-size-adjust: 100%;
      }
    六、如何去除Android平台中对邮箱地址的识别

    看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中:

    七、如何去除iOS和Android中的输入URL的控件条

    你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?

    答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果:

    setTimeout(scrollTo,0,0,0);
    请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。

    八、如何禁止用户旋转设备

    我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!

    至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。

    iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。
    图片、媒体的处理

    1、//使用流体图片
      img{
        width:100%;
        height:auto;
        width:auto\9;
      }

    2、audio元素和video元素在ios和andriod中无法自动播放
      应对方案:触屏即播
      $(‘html’).one(‘touchstart’,function(){
        audio.play()
      })

    3、如何禁止保存或拷贝图像
      通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
      img {
        -webkit-touch-callout: none;
      }
      PS:需要注意的是,该方法只在 iOS 上有效。

    九、阴影的处理

    1、 移动端如何清除输入框内阴影
        在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
        input,textarea {
          border: 0;
          -webkit-appearance: none;
        }

    十、字体的处理

    对于网站字体设置
      1、移动端项目:
      font-family:Tahoma,Arial,Roboto,“Droid Sans”,“Helvetica Neue”,“Droid Sans Fallback”,“Heiti SC”,sans-self;
      2、移动和pc端项目:
      font-family:Tahoma,Arial,Roboto,“Droid Sans”,“Helvetica Neue”,“Droid Sans Fallback”,“Heiti SC”,“Hiragino Sans GB”,Simsun,sans-self;

    3、字体大小尽量使用pt或者em,rem,代替px。

    4、设置input里面placeholder字体的大小 ::-webkit-input-placeholder{ font-size:10pt;}

    5、解决字体在移动端比例缩小后出现锯齿的问题:-webkit-font-smoothing: antialiased;

    十一、圆角设置

    放一个图片或者一个按钮,设置圆角会比较美观,设置圆角的值可以用百分比,也可以用em等单位。

    element{
        border: 1px solid #ccc;
        -moz-border-radius: 百分比;
        -webkit-border-radius: 百分比;
        border-radius: 百分比;
      }

    十二、边距凹陷

    1、像素边框(例子:移动端列表的下边框)
      .list-iteam:after{
        position: absolute;
        left: 0px;
        right: 0px;
        content: ‘’;
        height: 1px;
        transform: scaleY(0.5);
        -moz-transform: scaleY(0.5);
        -webkit-transform:scaleY(0.5);
      }

    2、

    与在pc端开发一样,开发过程中需要的一个很需要注意的问题的边距塌陷,典型的问题是margin-top的嵌套,对子元素设置margin-top值,子元素相对于父元素的位置没有变,而父元素跟着子元素一起向下移动响应的距离。其原理可参考本人之前的笔记css之BFC学习笔记,解决方案:

    1.给父元素div1设置一个padding值

    .div1{
        height: 500px;
        width: 100%;
        background: #ccc;
        padding-top: 1px;
      }

    2.给父元素div1设置一个overflow:hidden;在不加overflow:Hidden;的时候,margin-top:这个属性是认不到边的,也就是失效。但是ie浏览器解决了这个问题,火狐、谷歌之类的就会出现失效,所以这是个标准问题,也是个兼容问题。

    .div1{

    height: 500px;
      width: 100%;
      background: #ccc;
      overflow: hidden;
      }

    十三、禁止内容

    1、//禁止文本缩放
    html {
    -webkit-text-size-adjust: 100%;
    }

    2、移动端禁止选中内容
    如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
      .user-select-none {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
       }
      兼容IE6-9的写法:onselectstart=“return false;” unselectable=“on”

    十四、滚动效果

    十五、快速回弹

    快速回弹滚动
      .xxx {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:
      http://www.idangero.us/sliders/swiper/index.php

    十六、白色背景颜色搭配

    十七、常用的移动端开发框架以及工具

    框架

    1. 移动端基础框架
        zepto.js 语法与jquery几乎一样,会jquery基本会zepto~
        iscroll.js 解决页面不支持弹性滚动,不支持fixed引起的问题~ 实现下拉刷新,滑屏,缩放等功能~
        underscore.js 该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
        fastclick 加快移动端点击响应时间
        animate.css CSS3动画效果库
        Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案
    2. 滑屏框架
        适合上下滑屏、左右滑屏等滑屏切换页面的效果
        slip.js
        iSlider.js
        fullpage.js
        swiper
      3.瀑布流框架
        masonry
      工具推荐
        caniuse 各浏览器支持html5属性查询
        paletton 调色搭配

    十八、动画的处理

    开启硬件加速
    解决页面闪白
    保证动画流畅
    .css {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    设计高性能CSS3动画的几个要素
    尽可能地使用合成属性transform和opacity来设计CSS3动画,
    不使用position的left和top来定位
    利用translate3D开启GPU加速

    十九、消除闪烁

    消除transition闪屏
      .css{

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
      }

    二十、移动端取消touch高亮效果
      在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来禁止:
      .xxx {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
    二十一、如何解决盒子边框溢出

    当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小,包括边框的宽度
    二十二、如何解决android平台中页面无法自适应

    虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:

     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
    

    如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!

    展开全文
  • 写在前面:本人刚刚接触移动端开发,希望自己的见解能够帮助到他人,不足之处还望提醒。1 移动端开发分类1.1 Native App 原生App开发优点:(1)用户体验好(2)性能稳定(3)操作速度快(4)能够访问本地资源...
  • 伴随着深度学习技术的广泛使用,越来越多的深度学习模型被部署到移动端或IoT设备上运行,对于从事人工智能研发的相关人员,掌握对应的移动端开发技术是十分必要的,也将对自己的职业生涯产生极大的促进作用!...
  • 移动端开发工具整理

    2015-03-29 15:24:33
    整理移动端开发工具
  • 移动端开发技术浅析

    2017-10-19 16:35:03
    移动端开发技术浅析目录 APK下载 概述 技术介绍 技术对比 参考资料 1. APK 下载百度云链接:https://pan.baidu.com/s/1pLp44Fh2. 概述“一次编码,处处运行” 永远是程序员们的理想乡。二十年前 Java 正是举着这...
  • 移动端开发基础知识

    2019-04-09 23:37:04
    移动web开发指的是: 需要适配移动设备的网页开发 移动web开发与pc端web开发没有本质的区别,使用的还是HTML/CSS/JavaScript的技术 移动端与pc端web开发的区别: 1、浏览器不同 移动端的浏览器与pc端不同 谷歌浏览器...
  • 1. 什么是移动端开发工程师 目前流行的移动端开发包括android开发工程师,ios开发工程师 扩展的有:hybrid(混合开发)工程师,reactNative开发工程师 三方:微信小程序开发工程师,百度小程序开发工程师,三方工具...
  • 我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!先搞清楚两个概念,移动端web开发,web app开发1、 移动web开发(pc端的页面用手机浏览器打开)这部分跟web前端开发...
  • 概述:移动端开发的时候需要加上meta标签。但是除了那一个常用的meta标签以外还有很多形式的meta标签; 1.2百分比布局 子元素的宽度、补白、外边距的数据参照的是父元素的宽度的百分比;外边框的数据是没有百分比。...
  • 移动端开发学习要点

    2019-02-23 04:12:23
    一、移动端基础知识 关注点: 移动端与PC端的不同 手机设备像素对开发的影响 CSS各种度量单位 移动端浏览器分布情况 1.1 移动端与PC端的不同 有一次提起重要的查询网站 caniuse.com,可以到上面去查看是否兼容 w3...
  • 于是,立马入手学习。也记录对一些地方的理解: 1.过滤器 该项目中用到了时间过滤器,能将时间戳以固定的格式打印输出。过滤器官方文档在此,正如文档中所给出定义过滤器的两种方法,分为全局和局部,用在两个地方...
  • 下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧。一、vue-cli首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利...
  • CSS: 1、总: body{margin: 0;font-family: Arial,“Mircoscft YaHei”;color: #666;position:relative;} .page{height: 100%;width: 100%;position: absolute;...2、获取到class=page的第1个,然后给其...
  • 移动端跨平台开发前言移动端开发开发方式跨平台开发技术 跨平台开发已经不是什么新鲜的词了,现在再来整理这些有点为时过晚了,不过还是想把自己这两年在投入在移动端跨平台开发上的一些经验和一些踩的头破血流的...
1 2 3 4 5 ... 20
收藏数 41,480
精华内容 16,592