精华内容
参与话题
问答
  • 移动web开发移动端真机测试

    千次阅读 2017-04-06 13:54:30
    本文将详细介绍如何应用BrowserSync进行移动端真机测试特性  BrowserSync能让PC、各移动设备上的页面同时实时地响应文件的更改,而不用刷新操作。而且,当在其他一个设备上进行点击等行为时,该行为也会同

    chrome的开发者工具可以很好地做好模拟工作,但毕竟模拟和实际还是有差别的。所以,真机测试是一定要做的,如何高效地进行真机测试呢。个人感觉,还是BrowserSync用得比较称手。本文将详细介绍如何应用BrowserSync进行移动端真机测试

    特性
      BrowserSync能让PC、各移动设备上的页面同时实时地响应文件的更改,而不用刷新操作。而且,当在其他一个设备上进行点击等行为时,该行为也会同步到其他浏览器中

    这里写图片描述

    安装
      BrowserSync是基于Node.js的,是一个Node模块,所以需要先安装nodejs

    【nodejs安装】

      虽然nodejs官网提供了node的msi文件,但本人在window7系统下多次尝试,均无法安装成功,且会有your system has not been modified…的提示。最终本人使用了另一种方法成功安装了nodejs

      【1】下载node.exe

      【2】下载最新版本的npm zip格式压缩包

      【3】在硬盘某个位置,如D盘下建立一个文件nodejs,把上面两个下载的东西都放在这里,npm要解压

      【4】配置两个环境变量:一个是PATH上增加node.exe的目录D:\nodejs,一个是增加环境变量NODE_PATH,值为D:\nodejs\node_modules

    这里写图片描述

    这里写图片描述这里写图片描述
      【5】安装express:打开cmd命令行(在nodejs目录下,先按住shift按键,再点击右键,出现”在此处打开命令窗口”选项并点击),使用命令行定位到这Node目录下,键入指令npm install express

      【6】安装完成后,在命令行里面输入node -v如果输出nodejs的版本则安装成功

    设置
      nodejs安装完成后,需要对BrowserSync进行些简单设置,包括安装与监听

      【1】BrowserSync安装

      打开一个终端窗口,运行以下命令:

    npm install -g browser-sync

      【2】BrowserSync监听

      files 路径是相对于运行该命令的项目(目录)。如果需要监听多个类型的文件,需要用逗号隔开

    browser-sync start --server --files "css/*.css, *.html"

    注意,这样只是当你的项目是静态项目的时候可以,当你的本地已经部署好了服务器环境并且已经设置好了vhost的指向,例如测试中我使用的wamp集成,本地设置的localhost指向wamp64/www/那么我就需要这么输入BrowserSync监听

    browser-sync start  --proxy localhost --files "css/*.css, *.html"

      【3】在nodejs目录下新建一个index.html的文件,并设置如下代码

    复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
        height: 100px;
        width: 100px;
        background-color: lightblue;
    }    
    </style>
    </head>
    <body>
    <div>测试文字</div>    
    </body>
    </html>

    复制代码
      桌面端页面打开如下:
    这里写图片描述

    移动端设置
      若使用移动端则首先先保证移动端设备和桌面端设备处于同一局域网(一般地,都连入一个路由器即可)。而且,移动端无法访问localhost,需要查找电脑的内网ip。通过在命令行中输入ipconfig,查看ip地址为192.168.1.100。所以手机端访问的地址为http://192.168.1.100:3000

    这里写图片描述

      则移动端显示如下:

    这里写图片描述

      当把html文件修改为如下代码时

    复制代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html{
        background-color: pink;
    }
    </style>
    </head>
    <body>
    <div>测试文字</div>    
    </body>
    </html>

    复制代码
      无需刷新,移动端的网页自动变化为如下显示:

    这里写图片描述

      这样,就可以开始轻松地测试移动端设备了。

    展开全文
  • 移动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 分析出的建议进行优化,优先解决红色类别的问题
    
    展开全文
  • 移动端app开发,原生开发与混合开发的区别

    万次阅读 多人点赞 2019-09-26 18:47:01
    目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相...原生开发(Native App开发),是在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发。比如Android是...

    目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧!
    一、APP原生开发
    原生开发(Native App开发),是在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发。比如Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode进行开发。
    通俗点来讲,原生开发就像盖房子一样,先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等,都是经过精心的设计。原生APP也一样:通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来,一层层,一段段全用代码写出来。
    优点:
    1、可访问手机所有功能(如GPS、摄像头等)、可实现功能齐全;
    2、运行速度快、性能高,绝佳的用户体验;
    3、支持大量图形和动画,不卡顿,反应快;
    4、兼容性高,每个代码都经过程序员精心设计,一般不会出现闪退的情况,还能防止病毒和漏洞的出现;
    5、比较快捷地使用设备端提供的接口,处理速度上有优势。
    缺点:
    1、开发时间长,快则3个月左右完成,慢则五个月左右;
    2、制作费用高昂,成本较高;
    3、可移植性比较差,一款原生的App,Android和IOS都要各自开发,同样的逻辑、界面要写两套;
    4、内容限制(App Store限制);
    5、获得新版本时需重新下载应用更新。
    二、Web APP (HTML5)开发
    HTML5应用开发,是利用Web技术进行的App开发。Web技术本身需要浏览器的支持才能进行展示和用户交互,因此主要用到的技术是HTML5、Javascript、CSS等。
    优点:
    1、支持设备范围广,可以跨平台,编写的代码可以同时在Android、IOS、Windows上运行;
    2、开发成本低、周期短;
    3、无内容限制;
    4、适合展示有大段文字(如新闻、攻略等),且格式比较丰富(如加粗,字体多样)的页面;
    5、用户可以直接使用新版本(自动更新,不需用户手动更新)。
    缺点:
    1、由于Web技术本身的限制,H5移动应用不能直接访问设备硬件和离线存储,所以在体验和性能上有很大的局限性;
    2、对联网要求高,离线不能做任何操作;
    3、功能有限;
    4、APP反应速度慢,页面切换流畅性较差;
    5、图片和动画支持性不高;
    6、用户体验感较差;
    7、无法调用手机硬件(摄像头、麦克风等)。
    三、混合APP开发(原生+H5)
    混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说,这就是网页的模式,通常由“HTML5云网站+APP应用客户端”两部份构成。
    混合开发是一种取长补短的开发模式,原生代码部分利用Web View插件或者其它框架为H5提供容器,程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
    优点:
    1、开发效率高,节约时间。同一套代码Android和IOS基本上都可使用;
    2、更新和部署比较方便,每次升级版本只需要在服务器端升级即可,不再需要上传到App Store进行审核;
    3、代码维护方便、版本更新快,节省产品成本;
    4、比web版实现功能多;
    5、可离线运行。
    缺点:
    1、功能/界面无法自定:所有内容都是固定的,不能换界面或增加功能;
    2、加载缓慢/网络要求高:混合APP数据需要全部从服务器调取,每个页面都需要重新下载,因此打开速度慢,网络占用高,缓冲时间长,容易让用户反感;
    3、安全性比较低:代码都是以前的老代码,不能很好地兼容新手机系统,且安全性较低,网络发展这么快,病毒这么多,如果不实时更新,定期检查,容易产生漏洞,造成直接经济损失;
    4、既懂原生开发又懂H5开发的高端人才难找。
    以上就是原生开发、H5开发和混合开发各自的优缺点。相比之下,由于现代人的个性化需求越来越明显,所以原生APP开发也越来越多,定制化的服务更能满足消费者的需求。若您也想要定制一款别开生面的APP,就来找我们吧!

    展开全文
  • ... 使用列表系列标签完成常见网页中的列表结构; 熟练掌握表格,表单都系列标签,在项目中熟练使用;...了解哪些标签在项目中经常使用,哪些标签已被废除;...迈出HTML5开发的第一步,为后续课程打下基础;
  • 移动端Web开发

    千人学习 2019-09-23 15:58:04
    HTML5是移动端开发最常用的技术,熟悉HTML5新标签和Api以及CSS3的新的Api,可以使你的网页更加的绚丽多彩,并且开发出你意想不到的网页效果。学完此课程,你编写的代码就可以移动设备上完美兼容啦。
  • 国内的UC和QQ,百度等手机浏览器都是根据webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。 总结:兼容移动端浏览器,处理webkit内核浏览器即可。 1.2手机...

    1移动端基础

    1.1浏览器现状

    国内的UC和QQ,百度等手机浏览器都是根据webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。

    总结:兼容移动端浏览器,处理webkit内核浏览器即可。

    1.2手机屏幕现状

    现在移动端设备无论是Android还是iPhone,屏幕尺寸非常多,碎片化严重,分辨率也不同。作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是px。

    1.3常见移动端屏幕尺寸

    1.4移动端调试方法

    • Chrome DevTools(谷歌浏览器)的模拟手机调试
    • 搭建本地web服务器,手机和服务器在同一个局域网内,通过手机访问服务器
    • 使用外网服务器,直接IP或域名访问

    2.视口

    视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

    2.1布局视口 layout viewport

    • 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
    • IOS、Android基本将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面。

    2.2视觉视口 visual viewport

    它是用户正在看到的网站的区域

    2.3理想视口 ideal viewport

    • 为了网站在移动端有最理想的浏览和阅读宽度而设定
    • 需手动添写meta视口标签通知浏览器操作
    • meta视口标签的主要目的:布局视口的宽度应该与理想视口宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽

    2.4 meta视口标签

    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    /* width=device-width 宽度等于设备的宽度 */

    2.5 标准的viewport设置

    • 视口宽度和设备保持一致
    • 视口的默认缩放比例1.0
    • 不允许用户自行缩放
    • 最大、最小允许的缩放比例1.0
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

    3 二倍图

    3.1 物理像素和物理像素比

    • 物理像素点(分辨率)指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了的。
    • 我们开发时候的1px不是一定等于1个物理像素的
    • PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同
    • 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比

     3.2 多倍图

    • 对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,造成图片模糊
    • 在标准的viewport设置中,使用倍图来提高图片的质量,解决在高清设备中的模糊问题
    • 通常使用二倍图,因为iPhone6\7\8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
    • 背景图片注意缩放问题

    3.3 背景缩放 background-size

    • background-size:背景图片宽度 背景图片高度;
    • 单位:px,%,cover|contain
    • 只有一个参数时,指的是宽度,高度会等比缩放
    • background-size:cover;【cover等比例拉伸 要完全覆盖div盒子,可能有部分背景图片显示不出来】
    • background-size:contain;【contain高度和宽度等比例拉伸 当宽度 或者高度铺满div盒子就不再拉伸,可能有部分空白区域】

    3.4多倍图切图 cutterman

    3.5二倍精灵图的做法

    • 在firework里面吧精灵图等比例缩放为原来的一半
    • 之后根据大小测量坐标
    • 注意代码里面background-size也要写:精灵图原来宽度的一半
    展开全文
  • 由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewport" content="width=device-width...
  • 一、以配置移动开发环境的方法 很多初学者都因为不知道怎么才能将自己在电脑上写的页面放到手机中测试,其实很简单,只要有以下几个原材料就可以了: 1、XAMMP或其他集成环境 2、自己能用电脑开一个WiFi热点
  • 从零开始学习移动端Web开发

    万次阅读 多人点赞 2017-05-11 13:19:57
    本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。基础准备首先我们要有HTML/HTML5、CSS/CSS3基础知识(会简单的切图就可以了) ,如果能懂点JS那就更好啦。其次我们要清楚一些
  • jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使用jQuery Mobile框架开发移动端Web App的入门教程 ...
  • vue 开发移动端

    2018-09-30 15:47:10
    使用vue心得,聊聊vue
  • 第五部分:移动端页面开发 1. 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页, 这样带来...
  • 最新移动端web开发总结

    千次阅读 2019-04-23 19:15:46
    1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端...如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大...
  • 移动端Web开发环境搭建

    千次阅读 2016-01-18 13:08:55
    本文主要总结一下移动端进行前端开发时需要用到的一些工具,以及他们之间互相的组合,同时也包括本人使用的组合。 1. Chrome To Mobile PC机上安装该chrome插件;在手机端安装chrome浏览器,登录chrome...
  • 此模版是在某公司做微信...移动端商城手机网站html整套模板,web移动商城仿app手机模板下载。原生的js和jquery-1.6.2.min.js,页面才有html5自适应。包括首页(轮播,导航)、兼职(视频,图文话题,申请)、优惠(...
  • 移动web开发

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

    万次阅读 多人点赞 2018-07-15 20:33:43
    先搞清楚两个概念,移动端web开发,web app开发1、 移动web开发(pc端的页面用手机浏览器打开)这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机...
  • 我自己做web开发比较熟练,这样是不是 网页适配 开发成本更低,开发更快。我自己想做app,还需要学习 android和ios开发吗? 了解的能 谈谈吗? ![图片说明]...
  • 移动web开发框架研究

    千次阅读 2016-02-11 21:33:53
     纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS。jQuery M
  • 静态布局在移动端上的自适应,看这里。
  • 移动端开发跟PC端的开发还是稍有区别的,以下内容是个人移动开发的经验,后期会不定时更新错误以及新的内容 一、从meta标签说起 首先,在移动端,我们希望将页面窗口自动调整到设备宽度,需要的meta标签是这样 ,...
  • PHP实战系列之一:0基础开发移动端报名功能主题说明 都说万事开头难,在成为PHP大牛的路上,你是否也正在发愁如何迈出第一步?大牛带你从零开始搭建移动端报名功能。适合对象 PHP爱好者、学习者、入门者。名师大牛...
  • 移动web开发之像素和DPR详解

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

空空如也

1 2 3 4 5 ... 20
收藏数 34,213
精华内容 13,685
关键字:

移动web开发