HTML5:移动端开发入门[通俗易懂]

HTML5:移动端开发入门[通俗易懂]HTML5:移动端开发入门一、前言常见的移动端开发分为移动版网站和响应式设计。移动端开发可以让技术人员专注于移动端的页面优化,而无需在意桌面版的兼容,但页面一旦改动内容,维护成本就翻倍了;响应式设计让开发人员只需维护一份项目,节省开发和维护成本,不过缺点是需要做好移动端和桌面端的兼容,也十分考验页面设计。两种开发方式孰强孰弱,暂无定论,本博客主要探讨一下移动端开发的技巧。二、移动端开发技巧1.Viewport设置传统桌面端网站的显示窗口往往都是在1024X768的分

大家好,又见面了,我是你们的朋友全栈君。

HTML5:移动端开发入门

一、前言

  • 常见的移动端开发分为移动版网站和响应式设计。

  • 移动端开发可以让技术人员专注于移动端的页面优化,而无需在意桌面版的兼容,但页面一旦改动内容,维护成本就翻倍了;

  • 响应式设计让开发人员只需维护一份项目,节省开发和维护成本,不过缺点是需要做好移动端和桌面端的兼容,也十分考验页面设计。

  • 两种开发方式孰强孰弱,暂无定论,本博客主要探讨一下移动端开发的技巧。

二、移动端开发技巧

1. Viewport设置

  • 传统桌面端网站的显示窗口往往都是在1024X768的分辨率以上开发的,远远大于移动端的窗口大小。为了使桌面端网页能在移动端正常显示,移动端浏览器推出了一种名为“viewport”的虚拟窗口,在不同的设备中,这一窗口的大小都不同。(windows为1024px,ios为980px)

  • 为了使移动设备能完整显示页面,viewport往往被浏览器加上缩放以自适应宽度,让980px的网页显示在320px的移动设备上。这就是为什么我们有些网页在手机上看起来文字和图片都很小。(此时用JavaScript获取页面宽度时,仍然为980px)

  • 在移动端页面中,我们可以在标签中添加meta标签,对viewport加以设置。

    <meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
    
  • 上面这段代码做了两件关键的事情:

    1. 设置viewport的宽度为设备的宽度;
    2. 设置scale=1.0,即窗口默认不缩放;
  • 如果你不希望用户缩放你的页面,可以像下面这样做:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>
    

    即锁定页面缩放为1.0,组织用户进行缩放行为。

2. 百分比布局

  • 百分比布局比传统像素布局的优势在于,当用户进行缩放时,页面布局不会因为宽度改变而混乱。
  • 当用户缩放过大时,可能造成图片或文字部分被遮挡的情况,可以通过以下方法来解决:
    1. 对于图片,为其设置padding;
    2. 对于文字,可用vw来替代px。vw代表文字对viewport的宽度,vh代表高度,在vw体系中,viewport的宽度设置为100vw,依次来换算相对于的文字大小。

3. 弹性布局:Flex

  • 传统的网页充斥了大量的float,对浏览器渲染性能具有很大压力。对此,有一种更加灵活的弹性盒子模型——Flex布局。

  • 关于弹性布局的相关知识,请跳转MDN网站进行学习,这里不再赘述:

4. Media Query

  • 移动端的分辨率五花八门,高分辨率图片在低分辨率的手机里渲染压力大,低分辨率图片在高分辨率手机里又十分模糊,两种情况都非常糟糕。

  • 对此,CSS3提供了一种名叫Media Query的显示规则。

        <link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">
    
    

    上面的代码中,使用link标签引入外部css文件,同时增添了media属性。下面对内容进行解释:

    1. screen代表媒体的类型为电脑或者移动终端显示屏幕(可用值:all,print,tv等);
    2. and表示“与”的关系;
    3. (max-width: 600px)表示媒体的特性,需要放置在圆括号中,代表媒体最大的宽度就是660px;
    4. 所以整个media的含义是:当屏幕宽度小于等于600px时,该css文件适用。
  • 下面进行举例:

    1. screen and (min-width: 400px):当屏幕宽度大于等于400px时,应用该css文件;
    2. screen and (min-width: 400px) and (max-width: 600px):当屏幕宽度大于400px小于600px时,应用该css文件;
    3. all and (max-device-width: 480px):当设备宽度小于等于480px时,应用该css文件;
    4. all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait):当所有媒体设备宽度介于481px与1024px之间时,应用该css文件。当portrait改为landscape时,则表示匹配横屏的媒体。
  • 有了media query,我们就可以针对不同屏幕分辨率的设备分别制作相应的css文件:

        <!-- 针对所有设备的基础样式 -->
        <link rel="stylesheet" href="./css/base.css">
        <!-- <=480的手机可用 -->
        <link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)">
        <!-- 480<px<1024的手机可用 -->
        <link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)">
        <!-- >=1024的手机可用 -->
        <link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)">
    
  • 当然,我们也可以在css文件中指定对应的限制:

    @media all and (max-device-width: 480px){ 
         
        h1 { 
         
            font-size : 24px;
        }
    }
    

    需要注意的是,对应规则的css代码必须放在media的括号中。

5. spite图

  • 在桌面端中,文件的并行下载早就受到了关注,在移动端更加引起重视,在移动设备中,并行下载的文件数量十分有限,一般在4~5个。文件多了会影响页面的加载速度。

  • 为了解决图片数量下载的问题,雪碧图是一个很好的选择。

  • 下面举个例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Document</title>
        <style> *{ 
           padding: 0; margin: 0; } ul{ 
           list-style: none; } li{ 
           width: 250px; float: left; position: relative; font-size: 32px; color: #565656; border-bottom: 1px solid #ccc; line-height: 170px; text-indent: 180px; } li::before{ 
           content: ""; width: 170px; height: 170px; background: url(./image/color.jpg) no-repeat; position: absolute; left: 10px; } li:nth-child(1)::before{ 
           background-position: 0 0px; } li:nth-child(2)::before{ 
           background-position: 0 -170px; } li:nth-child(3)::before{ 
           background-position: 0 -350px; } li:nth-child(4)::before{ 
           background-position: -170px 0px; } li:nth-child(5)::before{ 
           background-position: -170px -180px; } li:nth-child(6)::before{ 
           background-position: -170px -350px; } li:nth-child(7)::before{ 
           background-position: -340px 0; } li:nth-child(8)::before{ 
           background-position: -340px -190px; } li:nth-child(9)::before{ 
           background-position: -340px -340px; } </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>    
    </body>
    </html>
    

    显示结果:

在这里插入图片描述

  • 利用spite图,可以减少并行图片的下载,加快渲染速度。

6. 图标字体

  • 图标字体是取代图片,用来展现特殊图标和特殊字体的一种重要手段,其普及的速度十分之快,一些著名的网站如:阿里巴巴矢量图标库、fontawesome等都有许多精美的图标字体;

  • 下面我们利用一套图标来演示一下图标字体的用法:

    1. 以FlatUI为例,先从官网上下载相关字体文件,引入页面:

       @font-face{ 
             
           font-family: 'flat-ui-pro-icons-regular';
                  /*三选一*/
           src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'),    /*常见的矢量字体封装格式*/
               url("./font/glyphicons/flat-ui-pro-icons-regular.eot"),     /*SFNT子集化后压缩*/
               url('./font/glyphicons/flat-ui-pro-icons-regular.woff');    /*SFNT压缩后的文件*/
      }	
      
    2. 新建一个h1标签,在其before伪类中引入字体,注意:content的内容为unicode编码

      h1::before{ 
             
          font-family: 'flat-ui-pro-icons-regular';
          content: '\e608';
          margin-left: 20px;
      }
      
    3. 最终在页面的呈现效果:

      在这里插入图片描述

    4. 值得一提的是,图标字体的颜色可以跟随标签的颜色而改变;若要使用彩色的icon时,单色的图标字体时无法实现的,需要用svg或者图片来实现。

7. 移动端的交互

  • 在移动设备上,人们的交互方式由鼠标键盘转变为触摸,因此,一遍的交互事件也需要换成适合移动端的事件;

  • 传统的click事件在移动设备上会有大约1s的延迟,因为手机浏览器需要判断用户时长按还是点击;

  • 要使移动端的体验更为流畅,可将点击事件换为touch事件:

    let btn = document.getElementById('btn');
    btn.addEventListener('touchstart',function(ev){ 
         
        console.log(ev.touches.length)
    })
    document.body.addEventListener('touchmove',function(ev){ 
         
        console.log(ev.target)
    })
    
  • touch中共有touchstart、touchmovetouchend三个事件;

    **touchstart:**触摸开始的时候触发

    **touchmove:**手指在屏幕上滑动的时候触发

    **touchend:**触摸结束的时候触发

  • 并且每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

    touches:当前位于屏幕上的所有手指的列表;

    targetTouches:位于当前DOM元素上的手指列表;

    changedTouches: 涉及当前事件手指的列表。

  • 每个触摸点由包含了如下触摸信息(常用):

dentifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageY/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。

  • 除了touch事件外,ios还提供了gesture事件,即多指操作。当有两根以上的手指触摸屏幕时,就会触发该事件:

    document.body.addEventListener('gesturechange',function(ev){ 
         
        console.log("手指旋转角度为:" + ev.rotation);
        console.log("手指旋缩放为:" + ev.scale);
    })
    
  • gesture 事件如下:

    gesturestart:当一个手指已经按在屏幕上,另一个手指又触摸屏幕的时候触发。类似于touchstart的作用一样;
    gesturechange:当触摸屏幕的任何一个手指的位置发生变化的时候触发。

    gestureend:当任何一个手指从屏幕上面移开时触发。

8. 一些小细节

  • 获取用户客户端信息:

    console.log(navigator.userAgent);
    
  • 获取到客户端信息后,可利用正则表达式进行判断,并推送不同规则的css样式或者页面跳转。详情请见这篇文章:

  • 获取用户的网络环境:

    console.log(navigator.connection.type);
    
  • 获取用户屏幕状态:

    console.log(window.orientation || screen.orientation);
    
  • 设置开启首页(IOS):

    <link rel="apple-touch-startup-image" href="start.png">
    
  • 设置iTunes链接:

    <meta name="apple-itunes-app" content="app-id=123456">
    

三、移动端开发框架

  • Zepto——移动端的jQuery。Zepto的使用方式与jQuery几乎一致,并且为移动端开发提供了不少接口。

  • BootStrap、Foundation、Semantic、Amaze——前端开发框架,提供了一系列组件和样式,方便开发者使用;

  • Flat UI、BootMetro、Pure、Colors——设计工具包。Flat UI提供了一系列页面的基础元素——图标字体、矢量图形等,注重设计方面的美感,对于设计感不足的开发者十分良好。

  • D3——可视化工具。如果要在网页中展现大量图表和数据,可视化工具只需简单的代码,就可以完成各种高大上的图表。

  • Hammer——轻松控制触摸手势。Hammer.js提供了tap、doubletap、pinch(二指拨动)、rotation、swipe、pan(慢速拖动)等手势事件没事的复杂的手势变得简单起来。切具有良好的兼容性,能识别市面上大多是移动设备。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151956.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Drupal 默认安装的目录结构

    Drupal 默认安装的目录结构文件夹目录中的每一元素的详解如下:includes:包含了Drupal常用的函数库。misc:用来存储Drupal安装中可用的JavaScript,和其它各种图标和图片文件。modules:包含了所有核心模块,其中一个模块对应一个文件夹。最好不要乱动这个文件夹(包括profiles和sites以外的其它目录)下面的任何东西,你要添

  • vscode设置快捷键删除行

    vscode设置快捷键删除行开发中习惯的快捷键删除:ctrl+Dvscode的删除快捷键:ctrl+shift+K修改方式:默认ctrl+D被addselectiontonextfindmatch使用, 先修改调它的快捷键,如图改为ctrl+shift+alt+D,按回车键保存 在修改DeleteLine的快捷键为ctrl+D,按回车键保存 完成…

  • 金士顿DataTraveler 100G3 16G的U盘量产过程

    金士顿DataTraveler 100G3 16G的U盘量产过程几年前买的金士顿16GU盘由于这几天安装系统做成了启动盘,刚开始还可以正常,谁知道睡了一觉就废了。第一次尝试修复具体表现:1、插上电脑可以识别盘符,但是打不开,提示请插入U盘。2、磁盘管理中

  • 关于sources.list和apt-get [转载]

    关于sources.list和apt-get [转载]

    2021年11月16日
  • 互联网金融风控模型「建议收藏」

    互联网金融风控模型「建议收藏」一、市场调研目前市面主流的风控模型1、互联网金融前10名排行榜(数据截止日期2017-09-12)互联网金融公司排名分别是蚂蚁金服、陆金所、京东金融、苏宁金融、百度金融、腾讯理财通、宜信、钱大掌柜、万达金融和网易理财。1.1蚂蚁金服1.1.1大数据技术对接第三方征信公司芝麻信用分,通过用户信用历史、行为偏好、履约能力、身份特质、人脉关系五个维度对…

  • 360常用快捷键_10个常用的快捷键

    360常用快捷键_10个常用的快捷键“工欲善其事必先利其器”,整理了一份360常用快捷键。======================================常用快捷键======================================Ctrl+小键盘“+”当前页面放大10%Ctrl+小键盘“-”当前页面缩小10%——————-…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号