精华内容
参与话题
问答
  • 移动web开发

    2018-03-19 11:57:06
    现在移动设备越来越多,以致于开发移动端页面的需求旺盛。为了应对诸如京东、淘宝这样的电商网站的开发,因此需要学习这些网站是如何制作的。同时京东移动端也是移动端百分比布局的代表(百分比布局不能适配所有手机)
  • 移动web开发笔记

    万次阅读 2016-05-15 20:12:27
    移动web开发笔记移动web开发笔记

    移动web开发笔记

    参考:
    移动web开发入门
    移动端web开发技巧

    基础概念

    像素单位

    CSS pixels与device pixels CSS pixels

    浏览器使用的抽象单位, 主要用来在网页上绘制内容。 device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式:
    1 CSS pixels = (devicePixelRatio)^2 device pixels
    (^2是平方的意思,至于 devicePixelRatio是什么东西,后面会讲解) 。

    PPI/DPI

    PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。(注:这里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我们就能很容易理解PPI的计算方式了,我们需要首先算出手机屏幕的对角线等效像素,然后处以对角线(我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度),就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是,根据公式计算出来的iPhone 4的PPI为330,要比苹果官方公布的326要高一点点。

    devicePiexelRatio

    pixel - px ( picture element )
    
    dpi / ppi - 每英寸像素 ( dot per inch )
    
    dips - 设备独立像素 ( device-independent pixels )
    
    devicePixelRatio - 物理像素 / dips 
    

    文字大小控制

    px, rem
    
    固定大小 - px
    
    多屏适配,统一修改 - rem
    相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
    
    rem - font size of the root element (W3C)
    

    viewport

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

    <meta name="viewport"
          content="width=device-width,
                   height=device-height,
                   inital-scale=1.0,
                   maximum-scale=1.0,
                   user-scalable=no;"
    />

    在苹果的规范中,meta viewport 有6个属性,分别如下:
    - width - viewport的宽度[pixel_value |device-width]
    - height - viewport的高度[pixel_value |device-height]
    - initial-scale - 初始的缩放比例[float_value]christer1229
    - maximum-scale - 允许用户缩放到的最大比例
    - minimum-scalbujue - 允许用户的最小缩放值
    - user-scalable - 用户是否可以手动缩放 [yes | no]

    响应式布局

    原则

    • 移动优先
    • 渐进增强

    实现方式

    • 媒体查询
    • 使用JS
    • 使用第三方框架

    布局方案

    百分比布局(流体布局)

    将元素原本的定宽除父容器的宽度得到百分比设置为宽度,使用百分比,文字使用 em。

    • 优点:
      流动布局页面对用户更友好,因为它能自适应用户的设置。
      页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。
      如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。
    • 缺点:
      设计者更难控制用户所见,并可能忽略掉一些错误,因为在特定的分辨率下看起来好的;
      图片,视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户;
      在特别大的分辨率下,内容会被拉成长长的一行,变得难以阅读;
      会有画面失真问题

    弹性(flexible)布局

    用rem替代px
    原理:定一个最大宽度,设备屏幕超过这个宽度之后,rem大小不再变化,否则,rem大小设置为屏幕宽度的几分之一,页面中的长度单位值用rem代替px,这样随着页面的宽度变化能够进行等比例缩放。
    rem实际是页面根元素的字体大小,通过js改变rem值的代码如下:

    ;
    ( function( win ) ) {
        var doc = win.document;
        var docEl = doc.documentElement;//获取文档元素
        var tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;//获取设备宽度
            if ( width > 540 ) {
                width = 540;
            }
            var rem = width / 10;//设置rem为屏幕宽度的十分之一
            docEl.style.fontSize = rem + 'px';
        }
        win.addEventListener('resize', function() {//屏幕宽度改变时
            clearTimeout(tid);//清除之前的计时器
            tid = setTimeout(refreshRem, 300);//300ms后改变rem大小
        }, false);
    
        win.addEventLister('pageshow', function( e ) {//页面显示时
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })( window );

    参考:移动端页面使用rem来做适配

    flex-box布局

    flex-box,参考:
    Flex 布局教程:语法篇
    优点:布局方便,灵活性高;
    缺点:兼容性问题;

    图片处理

    普通设置:

    img {
        max-width: 100%;
    }

    或:

    img {
        width: 100%;
        max-width: 300px;
    }//限制最宽不超过300px;

    响应式图片:

    参考:
    响应式图片srcset全新释义sizes属性w描述符
    Srcset和sizes

    即根据屏幕密度现实对应尺寸图片
    src:指定资源(在浏览器不认识srcset和size时会加载这个)
    srcset:srcset的值是可用图像版本的URL列表;每个图片的宽度都用w描述符来表明。
    sizes:使用长度与媒体查询配合,浏览器会检测每一个媒体查询,直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块:图像渲染宽度或者相对于视图。
    eg.

    <img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
            100vw"
     alt="A rad wolf" />

    媒体查询

    1. 可以通过<link>标签的media属性为样式表指定设备类型
    <link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">
    <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> //纵向屏幕
    <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> //宽度小于900px时
    1. 在css中同样可以使用
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    1. @import方法
      @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。
    @importurl(reset.css) screen;   
    @importurl(print.css) print;

    <head>中的<style>标签中引入媒体类型方法。

    <head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

    为方便查阅,下面列出了所有可供媒体查询检测的特性
    - width:视口宽度。
    - height:视口高度。
    - device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)。
    - device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)。
    - orientation:检查设备处于横向还是纵向。
    - aspect-ratio:基于视口宽度和高度的宽高比。一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9。
    - device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度和高度的宽高比。
    - color:每种颜色的位数。例如min-color: 16会检测设备是否拥有16位颜色。
    - color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
    - monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如monochrome: 2。
    - resolution:用来检测屏幕或打印机的分辨率,如min-re一种检测 IE 是否加载完成的方式,使用 doScroll 方法调用,详情可见http://javascript.nwbox.com/IEContentLoaded/
    原理就是对于 IE 在非 iframe 内时,只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在上述中间隔 50 毫秒尝试去执行 doScroll,注意,由于页面没有加载完成的时候,调用 doScroll 会导致异常,所以使用了 try -catch 来捕获异常。
    结论:所以总的来说当页面 DOM 未加载完成时,调用 doScroll 方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。solution: 300dpi。还可以接受每厘米像素点数的度量值,如min-resolution: 118dpcm。
    - scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p HD电视(>devide-width指屏幕宽高,width指渲染窗口宽高
    720p的p即表明是逐行扫描)匹配scan: progressive,而1080i HD 电视(1080i中的i表明是隔行扫描)匹配scan: interlace。
    - grid:用来检测输出设备是网格设备还是位图设备。
    - 在上述所有特性中,除scan和grid之外,都可使用min和max前缀来创建一个查询范围。

    HTML5

    新表单类型

    • placeholder
      只需在input元素中加入placeholder属性,其属性值就会默认显示为占位符文字,输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时,占位符文字则会再次显示。
    • required
      在支持HTML5的浏览器中,在input元素中追加布尔类型的属性required(也就是说你可以选择追加或不追加该属性),则表明该表单域为必填项。如果表单提交时该必填项没有任何信息,浏览器则会显示警告信息。警告信息的显示方式(包括显示内容和样式)取决于浏览器与输入框类型。
      range、color、 button和hidden类型的输入元素则不能使用required,因为这几种输入类型几乎都有默认值。

    • autofocus
      HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦(或选中),以便于用户输入。
      例如有多个表单域追加了autofocus属性,在Chrome(v16)中会聚焦最后一个使用autofocus属性的表单域,而Firefox(v9)恰恰相反,会聚焦第一个使用autofocus的表单域。

    • autocomplete

    也可以通过给表单本身(不是fieldset)设置属性来禁用整个表单的自动完成功能。示例代码如下:

    <form id="redemption" method="post" autocomplete="off">
    • list(及对应的datalist元素)
      list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候,显示一组备选值。
      list属性中的值(awards)同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将option包裹在select中不是必需的,但这样做便于为老版本浏览器提供降级方案。

    HTML5的新输入类型

    • type=”email”——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。
    • type=”number”——支持该特性的
      浏览器期望输入一个数字。这种输入类型默认还提供控制按钮,允许用户简单地点击向上或向下来改变数值。
      你可能注意到在上面的代码中,我们还设置了允许输入的最小值和最大值范围,具体代码如下:
    type="number" min="1929" max="2015"

    超出范围的数字会(应该)得到特殊对待。
    - type=”url”——你猜对了,URL输入类型用于输入URL地址。
    - type=”tel”是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码- type=e=”search”——和普通文本输入框的表现基本一样,仅在个别浏览器中渲染得有点细微差别。
    你可用pattern属性通过正则表达式来定义表单域的数据
    - type=”color”——会在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值。
    - 日期和时间输入类型
    和color类型一样,目前对date提供原生支持的浏览器寥寥无几,大多数浏览器默认都将其渲染为标准的文本输入框。超级棒的Opera已经实现了这个功能
    range输入类型会生成一个滑动条。

    CSS3

    笔记

    设备控制

    • 打开数字键盘
      <input type="tel">
    • 隐藏地址栏
      setTimeout(function(){ window.scrollTo(0, 1); }, 0);
    • 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
      <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
      <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
      <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

    设备交互

    1. input fixed失效问题
      参考:
      iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
      【小贴士】虚拟键盘与fixed带给移动端的痛!
      Web移动端Fixed布局的解决方案
      出现原因:
      移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点,但是文本框获得焦点未必会弹出键盘;
      收起虚拟键盘的条件是:文本框失焦
      总而言之,我们认为会出现或者消失虚拟键盘的时候都可能不工作
      在移动设备上,如果文本框在上方,点击不会有什么问题:
      在设备的最下面的话,整个块会上移,以将input区域显示出来
      这个时候几个棘手的问题就出现了:
      ① 虚拟键盘的出现对页面来说是不可知的,这句话的理解是:没有键盘出现事件,没有办法获取键盘高度
      ② 键盘是“贴”在了viewport上,表面上不会对dom产生“任何”影响,但是这个时候一些定位元素的表现却变得“怪异”。

    软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。

    这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样的问题。

    解决方案:
    使fixed的父元素不滚动,将滚动区域限制在与footer和header同级的内容部分。

    性能优化

    参考:移动开发规范概述
    要考虑Android低端机与2G网络场景下性能 注意!

    发布前必要检查项

    所有图片必须有进行过压缩
    考虑适度的有损压缩,如转化为80%质量的jpg图片
    考虑把大图切成多张小图,常见在banner图过大的场景
    

    加载性能优化, 达到打开足够快

    数据离线化,考虑将数据缓存在 localStorage
    初始请求资源数 < 4
    图片使用CSS Sprites 或 DataURI
    外链 CSS 中避免 @import 引入
    考虑内嵌小型的静态资源内容
    初始请求资源gzip后总体积 < 50kb
    静态资源(HTML/CSS/JS/Image)是否优化压缩?
    避免打包大型类库
    确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意!
    尽量使用CSS3代替图片
    初始首屏之外的静态资源(JS/CSS)延迟加载
    初始首屏之外的图片资源按需加载(判断可视区域)
    单页面应用(SPA)考虑延迟加载非首屏业务模块
    开启Keep-Alive链路复用
    

    运行性能优化, 达到操作足够流畅

    避免 iOS 300+ms 点击延时问题 注意!
    缓存 DOM 选择与计算
    避免触发页面重绘的操作
    Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意!
    尽可能使用事件代理,避免批量绑定事件
    使用CSS3动画代替JS动画
    避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
    HTML结构层级保持足够简单
    尽能少的使用CSS高级选择器与通配选择器
    Keep it simple
    

    在线性能检测评定工具使用指南

    访问 Google PageSpeed 在线评定网站
    在地址栏输入目标URL地址,点击分析按钮开始检测
    按 PageSpeed 分析出的建议进行优化,优先解决红色类别的问题
    
    展开全文
  • 同时也有部分准备进入移动Web开发领域的新手,苦于入门困难,而难以上手。因此,一本介绍移动Web开发的书籍便成为开发者最渴望的资源之一。 基于上述两种原因,作者认为需要编写一本能够利用HTML5新技术开发移动Web...
  • HTML5移动Web开发指南,完整扫描版

    热门讨论 2013-11-21 16:28:11
    《HTML5移动Web开发指南》主要围绕html5技术,讲述如何利用html5相关技术开发移动web网站和web app应用程序。《HTML5移动Web开发指南》共分为四大部分,第一部分主要讲述web技术的发展及html5标准在移动web技术中的...
  • 移动web开发—视频

    2018-02-25 18:59:57
    资源内涵网盘地址与密码,包含全部 移动 web 开发视屏教程
  • 《HTML5移动Web开发实战》石川著。全书共分10章,从移动Web、设备端配置和优化,交互、响应式设计、设备访问,调试、性能测试、富媒体等角度出发,包含了60多个实用的实例,详细阐述如何构建快速、响应式的HTML5移动...
  • HTML5移动web开发实战.pdf,HTML5移动web开发实战.pdfHTML5移动web开发实战.pdfHTML5移动web开发实战.pdfHTML5移动web开发实战.pdfHTML5移动web开发实战.pdf
  • 移动web开发框架研究

    千次阅读 2016-02-11 21:33:53
     纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS。jQuery M

     原文链接:http://blog.csdn.net/xyz_lmn/article/details/41052977


      纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架,项目中也有应用。国内也有公司,像BAT巨头也在探索和实现了适合自己的移动web框架。


    1、jQuery Mobile  


        jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认主题和SVG图标,还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能,更是集成了jQuery UI的Tab部件。jQuery Mobile继承了jQuery的优势,并且提供了丰富的适合手机应用的UI组件。jQuery Mobile还有很多的第三方扩展。

    1.1 jQuery mobile flat-ui 主题

    https://github.com/ququplay/jquery-mobile-flat-ui-theme


      

    1.2jQuery mobile Bootstrap 主题

     https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme







    2、Sencha Touch



        Sencha Touch做的Web App看起来更像Native App,用户界面组件和丰富的数据管理,全部基于最新的HTML 5和CSS3的 WEB标准,全面兼容Android和iOS设备。Sencha Touch提供了超过50个组件。




    3、阿里系web框架

         

        Kissy是阿里前端自己开发的前端框架,KISSY 是一款跨终端、模块化、使用简单的 JavaScript 框架。除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等,KISSY 还面向团队协作做了独特设计,提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY 为移动终端做了大量适配和优化,让你的程序在全终端均能流畅运行。KISSY Mobile是一套面向移动端的功能特性集合,实现灵活配置的转场动画和View的解偶。KISSY 5.0已经全面支持移动端。Kissy架构可以参考这里。Kissy架构图:



    4、百度移动web框架

    百度移动web框架有三个了解了一下。

    4.1 GMU  

        GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,具有代码体积小、简单、易用等特点,组件内部处理了很多移动端的bug,覆盖机型广,能大大减少开发交互型组件的工作量,非常适合移动端网站项目。 该组件基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件!



    4.2 Clouda+ 


        Clouda+是移动web应用开发整体解决方案,并特别针对百度轻应用场景进行了优化,旨在让webapp体验和交互媲美Native应用。



    4.3 efe   

    efe百度商业体系前端团队推出的web框架,efe有如优势。

    4.3.1模块化、组合式的移动前端框架
    4.3.2基于 Stylus 的移动端样式库

        他是提供了 JavaScript 模块、CSS 样式库与开发平台的完整前端解决方案。擅长移动端 SPA 项目、轻应用。

           他是专为移动端设计的 Mixin 风格样式工具库。在其基础上创建了 Rider UI,一个灵活的 UI 样式库。



    5、tencent

    5.1 Spirit

             Spirit并不是一个具体的框架或者工具,但是她是移动端一系列解决方案的整合与聚拢。她是Alloyteam开发团队在移动开发项目中通过大量实践、归纳、总结提炼而成,最终沉淀下来的一个体系,真正建立一套移动Web开发的集成解决方案。Spirit主要由5个部分组成:移动Web开发规范、JM、JMUI、Mobug、Mars。



    5.2 Frozen UI

        Frozen UI是腾讯ISUX团队(社交用户体验设计团队)根据最新的手机QQ设计规范制作的移动端Web框架,包括CSS基础样式和组件、JavaScript基础组件和一些动画效果库。为了方便记忆和增添趣味性,腾讯ISUX团队为它取了动画片《冰雪奇缘》的英文名,并把Elsa女王作为该项目的卡通代言人。

        项目主页:http://frozenui.github.io

        Github代码托管地址:https://github.com/frozenui/frozenui



    6、ionic


        Ionic提供了一个免费且开源的移动优化HTML,CSS和JS组件库,来构建高交互性应用。基于Sass构建和AngularJS 优化。

        Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的AngularIonic扩展。

        Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 github




    7、Amaze UI

          Amaze UI 采用业内先进的 Mobile first 理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅度提升你的开发效率。Amaze UI 非常注重性能,基于轻量的 Zepto.js 开发,并使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让你的 Web 应用可以高速载入。


    8、CardKit


        CardKit 是来自豆瓣的一个移动 UI 框架,使用 Card\Unit\Component 概念快速构建移动 Web 应用。应用外观跟原生应用无异。






    9、App.js


        App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 Web 应用,应用的外观跟原生的应用相同,性能也近乎一致。

    特点:

    跨平台,支持 Android 2.2+ 和 iOS 4.3+

    Widgets 和自定义主题

    页面调整管理



    10、Junior

        Junior为前端框架,用来构建基于HTML5的移动Web应用,外观与行为跟本地应用相似。它采用针对移动性能优化的CSS3转换,支持旋转灯箱效果,包含多样的Ratchet UI组件。整个框架使用Zepto(类似jQuery语法的轻量级移动设备js类库),且整合了backbone.js的视图和路由。Junior十分易于使用,且提供详细的文档及案例,便于学习。




    11、Jingle


        Jingle是一个SPA(Single Page Application)开发框架,用来开发移动端的html5应用,在体验上尽量去靠近native应用,希望有一天html5能够做到与native一样的操作体验。提供了按钮、列表、表单、弹出框、轮换、上拉/下拉、日历等各种移动端常用的组件,简单适用.





    12、mui

        性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

        mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。



    13、Polymer

        Google给我们带来了Polymer。Polymer是是一个让你可以轻易创建web组件的框架。
    在他们完成开发web应用底层结构之后,他们开始专注于UI。Polymer 是 material design 在 web 平台的实现. Polymer 团队与 material design 设计团队合作非常的紧密。 事实上, Polymer 在 material design 的研发阶段扮演着关键性的角色: 它被用于快速原型化和重现设计的概念. 


    展开全文
  • HTML5移动Web开发实战教程,可以学习关于web开发的一些基础的只是,还有更多的实战经验交给你。
  • 移动web开发之像素和DPR详解

    万次阅读 多人点赞 2018-02-09 10:17:50
     像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了。本文将介绍关于像素的相关知识   什么是像素...

    前话:
      像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了。本文将介绍关于像素的相关知识
      
    什么是像素:
      像素,又称画素,是图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为pel(picture element)
      像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时,屏幕能显示的画面的过渡更细致,网站看起来更明快。

      //ppi是指屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度
      这里写图片描述

    分类:
      实际上像素分为两种:设备像素和CSS像素
        1、设备像素(device independent pixels): 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的
        2、CSS像素(CSS pixels): 又称为逻辑像素,是为web开发者创造的,在CSS和javascript中使用的一个抽象的层
        每一个CSS声明和几乎所有的javascript属性都使用CSS像素,因此实际上从来用不上设备像素 ,唯一的例外是screen.width/height

    //我们通过CSS和javascript代码设置的像素都是逻辑像素
    width:300px;
    font-size:16px;

    缩放:
      在桌面端,css的1个像素往往都是对应着电脑屏幕的1个物理像素。
      这里写图片描述
      而在手机端,由于屏幕尺寸的限制,缩放是经常性的操作。
      设备像素(深蓝色背景)、CSS像素(半透明背景)
      下图表示当用户进行缩小操作时,一个设备像素覆盖了多个CSS像素
      这里写图片描述
      下图表示当用户进行放大操作时,一个CSS像素覆盖了多个设备像素
      这里写图片描述
      不论我们进行缩小或放大操作,元素设置的CSS像素(如width:300px)是始终不变的,而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的

    HTML中的css像素和dpr:
    在HTML中不得不提到viewport,经常会设置viewport的width=device-width,那这个device-width的值是多少呢?

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

    我们会发现在iphone5下device-width=320,iphone6下是375,iphone6+下是414,那也就是说device-width其实就是NA开发中屏幕宽度有多少pt和dp。

    device-width在html中也同样被解读为理想(基准)视口的宽度,即320px,375px,414px,这里的px就是指css像素,通常也被称为逻辑像素;那我们可以认为html中的css像素的显示尺寸应该和NA中的pt、dp的显示尺寸相等。
    

    这里写图片描述

    DPR:
      设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值
      dpr,也被成为device pixel ratio,即物理像素与逻辑像素的比,那也就不难理解:iphone6下dpr=2,iphone6+下dpr=3(考虑的是栅格化时的像素,并非真实的物理像素);
      

    DPR = 设备像素 / CSS像素(某一方向上)

    在早先的移动设备中,并没有DPR的概念。随着技术的发展,移动设备的屏幕像素密度越来越高。从iphone4开始,苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是DPR = 2

      实际上,此时的CSS像素对应着以后要提到的理想视口,其对应的javascript属性是screen.width/screen.height

      而对于设备像素比DPR也有对应的javascript属性window.devicePixelRatio

      以iphone8为例,iphone8的CSS像素为375px*677px,DPR是2,所以其设备像素为750px*1354px

      750(px) / 375(px)  = 2
      1354(px) / 677(px) = 2
      750(px)*1354(px) /  375(px)*677(px) = 4
    展开全文
  • 移动Web开发基础-Viewport

    千次阅读 2017-09-23 21:24:14
    导语:移动Web开发自然要从Viewport说起,那什么是Viewport呢?字面意思为视图窗口,在移动设备上就是指用来显示页面的那部分区域。 用移动设备来访问没有做特殊处理的PC页面,移动设备是显示不下那么宽的内容的...

    导语:移动Web开发自然要从Viewport说起,那什么是Viewport呢?字面意思为视图窗口,在移动设备上就是指用来显示页面的那部分区域。

    用移动设备来访问没有做特殊处理的PC页面,移动设备是显示不下那么宽的内容的,所以移动设备一般会将页面缩小来显示整个页面,用户可以将页面放在来看清楚内容,在做移动Web开发的时候,我们可以手动的设置页面的视窗宽度,页面缩放比例以及是否允许用户缩放等,那具体我们该怎么设置Viewport呢?我们先来了解移动Web开发的其他几个概念。

    设备像素

    对于设备来说,有两个设备像素:物理像素和独立像素。

    物理像素:

    设备的物理像素是指在设备屏幕上显示的最小的单元,也就是屏幕分辨率,比如iPhone 6的分辨率是750像素*1334像素。每个物理像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

    这里写图片描述

    独立像素:

    设备独立像素又称CSS像素,这是一个抽象的概念,是指Web编程中的逻辑像素。如iPhone 6的CSS像素是375像素*667像素,可以看出来,这刚好是物理像素的一半,他们之间的关系后面会讲到。也就是说,如果我们在css代码中设置某个div的宽度为375px,在iPhone 6竖屏情况下,刚好能占满屏幕宽度。

    像素密度(PPI)

    每英寸像素(英语:Pixels Per Inch,缩写:PPI),又被称为像素密度,是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器,电视机和手持电子设备屏幕的精细程度。通常情况下,每英寸像素值越高,屏幕能显示的图像也越精细。
    有研究表明,人类肉眼能够分辨的最高像素点密度是300每英寸像素。[1]超过300每英寸像素的屏幕被常常称为Retina显示屏,这个概念最早由苹果公司于2010年推出iPhone 4手机的时候提出。

    屏幕PPI计算公式:
    要计算显示器的每英寸像素值,首先要确定屏幕的尺寸和分辨率。

    这里写图片描述

    其中,

    • dp为屏幕对角线的分辨率
    • wp为屏幕横向分辨率
    • hp为屏幕纵向分辨率
    • di为屏幕对角线的长度(单位为英寸)

    以屏幕尺寸为4吋的iPhone 5为例,分辨率为1136x640,像素密度为326PPI。而分辨率为1920x1080的家用21.5寸显示器,像素密度为103PPI。

    看一下不同PPI的设备显示效果:

    SouthEastSouthEast

    iPhone 3GS (160每英寸像素,MDPI) 和 iPhone 4 (326每英寸像素,XHDPI)

    除此之外,我们还可以通过下面的设备像素比(dpr)来判断是不是Retina显示屏。

    设备像素比(DPR)

    设备像素比(Device Pixel Ratio 简称:DPR),是指物理像素和CSS像素的比例。

    设备像素比(DPR) = 物理像素个数 / CSS像素个数 (计算公式,前提是缩放比为1)

    对于一般的显示屏设备来说,DPR一般为1:1,但是在Retina屏幕设备中,DPR一般都是大于1:1的,以DPR为2的 iPhone 6 为例。

    SouthEastSouthEast

    这也就是为什么我们的设计稿一般按手机物理像素的两倍来做的原因,我们移动端的图片也都是按两倍屏或三倍屏要处理,因为如果按一倍来处理的话,我们的图片在手机设备上相当于放大到了两倍,会造成图片的模糊。

    目前市场中智能手机的DPR一般都是2或者3,对于iPhone手机来说比较明确,但是对于Android设备,目前各大手机厂商还没有得到很好的统一,有比较多样的比例。

    关于设备屏幕的一些信息,可以通过 http://screensiz.es 这个网站来查看,也可以通过 https://material.io/devices/ 来查看自己的设备屏幕信息,扫码更方便。

    这里写图片描述

    视口

    布局视口(Layout Viewport)

    在PC浏览器中,视口只有一个,并且 视口的宽度 = 浏览器窗口的宽度。在移动端,视口和浏览器窗口将不再关联,布局视口要比浏览器窗口大的多。布局视口是移动端CSS布局的依据,即CSS布局会根据布局视口来计算。
    JS可以通过document.documentElement.clientWidth来获取宽度。

    这里写图片描述

    视觉视口(Visual Viewport)

    用户正在看到网站的区域。
    JS可以通过window.innerWidth来获取宽度。

    这里写图片描述

    理想视口(Ideal Viewport)

    布局视口的宽度一般在 680~1024像素之间,这样可以使得PC网站在手机中不被压扁,但是这并不理想,因为手机更适合窄的网站,换句话说,布局视口并不是最理想的宽度。

    理想视口,定义了理想视口的宽度,比如对于iphone6来讲,理想视口是375*667px。但是最终作用的还是布局视口,因为我们的css是依据布局视口计算的,所以可以这样理解理想视口:理想的布局视口。

    我们可以通过设置Viewport的width= device-width 就可以将 Layout Viewport 的宽度设置为 Ideal Viewport 的宽度,还有通过设置initial-scale=1.0也同样可以实现效果,因为缩放是以 Ideal Viewport 作为参考的。

    要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病:

    设置Viewport

    上面说了,要想我们的网站在手机那么小的设备上也能正常查看,我们通常将布局视口的宽度设置为理想视口的宽度,也就是width= device-width,完整的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 - 用户是否可以手动缩放 

    这些值都可以通过JS的脚本注入到html中,所以后面还会讲基于此的一些适配解决方案。

    关于缩放以及initial-scale的默认值

    首先我们先来讨论一下缩放的问题,前面已经提到过,缩放是相对于ideal viewport来缩放的,缩放值越大,当前viewport的宽度就会越小,反之亦然。例如在iphone中,ideal viewport的宽度是320px,如果我们设置 initial-scale=2 ,此时viewport的宽度会变为只有160px了,这也好理解,放大了一倍嘛,就是原来1px的东西变成2px了,但是1px变为2px并不是把原来的320px变为640px了,而是在实际宽度不变的情况下,1px变得跟原来的2px的长度一样了,所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此,我们可以得出一个公式:

    visual viewport宽度 = ideal viewport宽度  / 当前缩放值
    
    当前缩放值 = ideal viewport宽度  / visual viewport宽度

    大多数浏览器都符合这个理论,但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的,也就相当于这理论在它身上基本没用;而IE则根本不甩initial-scale这个属性,无论你给他设置什么,initial-scale表现出来的效果永远是1。

    好了,现在再来说下initial-scale的默认值问题,就是不写这个属性的时候,它的默认值会是多少呢?很显然不会是1,因为当 initial-scale = 1 时,当前的layout viewport宽度会被设为 ideal viewport的宽度,但前面说了,各浏览器默认的 layout viewport宽度一般都是980啊,1024啊,800啊等等这些个值,没有一开始就是 ideal viewport的宽度的,所以 initial-scale的默认值肯定不是1。安卓设备上的initial-scale默认值好像没有方法能够得到,或者就是干脆它就没有默认值,一定要你显示的写出来这个东西才会起作用,我们不管它了,这里我们重点说一下iphone和ipad上的initial-scale默认值。

    我们经常会看到一个现象,用移动设备看PC页面,基本上设备都会帮我们缩放页面把内容全部展示,但是我们的PC页面有980或者1200或者其他的大小的,为了全部展示,所以设备对页面的缩放是动态的,不同的页面,不同的设备,缩放值都不会一样,也就是默认值是不确定的。

    根据测试,我们可以在iphone和ipad上得到一个结论,就是无论你给layout viewpor设置的宽度是多少,而又没有指定初始的缩放值的话,那么iphone和ipad会自动计算initial-scale这个值,以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度,也就是说不会出现横向滚动条。比如说,在iphone上,我们不设置任何的viewport meta标签,此时layout viewport的宽度为980px,但我们可以看到浏览器并没有出现横向滚动条,浏览器默认的把页面缩小了。根据上面的公式,当前缩放值 = ideal viewport宽度 / visual viewport宽度,我们可以得出:

      当前缩放值 = 320 / 980
    

    也就是当前的initial-scale默认值应该是 0.33这样子。当你指定了initial-scale的值后,这个默认值就不起作用了。

    总之记住这个结论就行了:在iphone和ipad上,无论你给viewport设的宽的是多少,如果没有指定默认的缩放值,则iphone和ipad会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。


    参考来源:
    1.《指尖上行 移动开发进阶之路》
    2.一篇真正教会你开发移动端页面的文章(一)
    3.移动前端开发之viewport的深入理解

    展开全文
  • 里面有三本关于移动H5开发的电子书,希望能对大家有用,还不错,很详细
  • HTML5移动Web开发指南

    千次阅读 2012-05-28 16:23:15
    HTML5移动Web开发指南 唐俊开 著 ISBN978-7-121-16083-7 2012年3月出版 定价:59.00元 16开 384页 宣传语 绝无仅有的HTML5移动Web开发专著 jQuery Mobile、Sencha Touch、PhoneGap入门首选 HTML5研究小组...
  • 通常,来自移动端的测试需求涉及2类: iOS/Android 移动端H5 因此,需要把基础的概念清清楚楚地落地 Client端 ...web平台 ...web平台开发 基于浏览器的网页语言技术 html/cs...
  • 跨平台的移动Web开发实战
  • 移动Web开发基础-rem布局

    千次阅读 2017-11-15 13:07:45
    前言在了解了基本的布局方案 移动Web开发基础-百分比+flex布局方案 之后,我们来了解下利用rem这个css单位来布局的方案。 其实不管哪种方案,最终的目的都是为了适配不同设备尺寸的屏幕显示。基本认识1.px是布局...
  • 移动web开发知识

    千次阅读 2015-06-09 14:15:10
    添加到主屏后的标题(IOS)<meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS)当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此...
  • 前言上篇在移动Web开发基础-百分比+flex布局方案中说到了比例盒子的实现,因为在移动端,需要适应各种屏幕宽度的设备,所以我们的图片以及其他一些元素需要根据屏幕宽度自适应的等比例缩放,这里就需要用到比例盒子...
  • 详细分解1、禁止ios和android用户选中文字.css{-webkit-user-select:none;}2、禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片.css{-webkit-touch-callout: none}3、webkit去除表单元素的默认样式.css{...
  • 1、移动web开发这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,...
  • 1.0针对移动端的开发方式可以分为3种: ...4.移动web开发是以Hybrid APP开发为基础的具有开发成本低,维护更新简单,无需安装,跨平台等优点,但在用户体验和性能上稍差 1.1 移动web开发和PC端web开发的区别: 1.PC端web
  • 移动Web开发实践

    千次阅读 2014-08-12 14:24:35
    移动设备的快速发展给用户带来了很大的便利。用户使用Android、iPhone和其它移动设备很容易接入互联网。移动设备对网页的性能要求比较高,下面就说说Mobile Web开发的一些心得。
  • 移动web开发规范

    千次阅读 2015-03-17 02:17:03
    移动web开发规范 一.头部声明 1、其中width=device-width就是说把页面宽度设置成和屏幕宽度一样 2、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作

空空如也

1 2 3 4 5 ... 20
收藏数 14,993
精华内容 5,997
关键字:

移动web开发