活动Web应用开发入门指南

 

移步Web开发之移动页面布局

视觉篇

智能移动设备由于发展历史短,但创新速度快,从而致使移动设备的物理属性差别巨大,个中一些物理特性影响视觉,另一部分影响到相互、包容或性质。对人类来说,至少有五分之四以上的外围消息通过视觉获得,视觉是人和动物最要害的感觉到,所以,大家从视觉起初说起。

看1个案例:

访问m.3600.com首页,首页宗旨图,在黑莓4下显得如下,主题图两侧没有空白:
图1
ca88手机版登录网页 1

但在三星(Samsung) Galaxy S4下,核心图两侧就有拨云见日的留白:
图2
ca88手机版登录网页 2

在那个应用场景中,页面包车型地铁突显效果由于设备的大体分辨率分歧而发出距离。类似那样的景观13分多,比如将手提式有线电话机横屏后视觉效果与竖屏状态的区别等,超过四分之二人都遇见过。

那么,移动设备的分辨率到底有多复杂呢?请看上边。

前言

正文针对手提式无线电话机设备设计的页面,并非包容全设备的响应式布局,常见的MobileWeb页面如H5页面、手机页面、WAP页、webview页面等等。在差别尺寸的无绳电话机配备上,页面“相对性的达到规定的标准合理的来得(自适应)”或者“保持统一效果的等比缩放(看起来差不离)

分辨率

从外观来看,移动设备相对PC来说尤其迷你,那是能带给用户的第3视觉感受,而装备个头大小对应的内部一个大体性格正是设备物理分辨率。移动装备经过长年累月迈入,已具有了相对不输于PC的情理分辨率,上面来看一张图:

图3(来自网络)
ca88手机版登录网页 3

经过图3能够看出两点:
1.
活动设备有很各类物理分辨率,早期的活动装备分辨率较低,而明天的位移设备分辨率已经不行高了。即将发表的One plus五分辨率将高达1704960,而近年来市面上最高分辨率的Android设备已达成25601440,俗称2k屏;
2.
高宽比也各有不一致,早期的活动设备存在各类奇葩的尺寸比例,但今后的大趋势是16:9,今后仍有应用局地奇葩尺寸比例的装置源源存在,比如BlackBerry的15:9。别的,Pad尺寸以4:③ 、16:9和16:10为主;

维基百科中\[List of displays by pixel
density\](http://en.wikipedia.org/wiki/List\_of\_displays\_by\_pixel\_density)详细的记录了各类设备的尺寸和分辨率。

考订:维基百科页面被删去,原因不明。使用多个代表方案查询设备的尺码和分辨率:

观察此间,大家早就率先次见识到了活动Web应用场景的复杂程度,前边还会有越来越多惊喜等待着大家。

对此日前宗旨图的选拔场景,3g.qq.com就付给了一个很好的缓解方案,它能依照荧屏宽度自适应调整难点图宽度。但以此案例你或然会有疑心,明明索爱4的分辨率为960640,S四分辨率为19191080,宽度640和1080偏离440px,但为何难题图侧边的空域唯有40px?

要弄驾驭那点须求精通上边一节的剧情设备像素比。

深切概念引出viewport

ca88手机版登录网页 4

配备像素比

设备像素比(devicePixelRatio)是装备物理像素和装置独立像素(device-independent
pixels
(dips))的比率。在此,小编更欣赏将装备独立像素称之为配备展现像素,那几个名字更有利于领悟,前面笔者将通用此名。

在浏览器环境中得以选拔window.devicePixelRatio赢得装备像素比。

上边的事例中,摩托罗拉4的装置像素比为2,S4的配备像素比为3,所以,总结出三个设施的装备突显像素分别为480320和640360,这样,宽度360 - 320碰巧等于40px。由于关键图棉被服装置为定点宽度320px,所以,在S4下就会展现为两侧留有40px的空域。

当今活动设备的装置像素比首要蕴含:1x、1.5x、2x、2.25x、3x,比如即将宣布的一加6设备像素比将完毕3x,如今天场景上称为1080p和2k显示器的Android手提式有线电话机无一例外都以3x,随着技术的提升,3x和4x将会是未来的主流。

在实际的移动Web应用场景中,设备像素比往往也潜移默化着用户的视觉感受,比如最特异的背景图案例,如下:

.icon {
  background-image: url(example.png);
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

为了使图片能适配全数装备像素比,呈现清晰、不虚并无锯齿,请考虑下,你会如何做吗?假若您对这几个题材感兴趣,能够看
@大漠
的那篇小说《走向视网膜(Retina)的Web时期》。

倘诺你还想要越来越多的刺探设备像素比能够看 @张鑫旭
的小说《设备像素比devicePixelRatio不难介绍》。

Pixel

  • 装备像素

    • 在LCD显示屏中,基于点阵排列,每三个像素右由红海蓝子像素结合

    ca88手机版登录网页 5

    • CRT显示器

      ca88手机版登录网页 6

  • CSS像素(用于控制成分样式的体制单位像素,是二个相对值)

    • CSS像素与显示器像素1:1相同大时辰:

      ca88手机版登录网页 7

    • 浏览器窗口宽度一定的境况下,把页面放大(Ctrl+),CSS像素(莲灰边框)开头被拉伸,此时3个CSS像素大于2个荧屏像素

      ca88手机版登录网页 8

Viewport

在此处作者骨子里想不出怎么样来写这一节的始末,因为那篇小说并不是给大家大饱眼福技术,所以就不难的写两句。

倘使没有接触过活动支付的同窗,只怕还没有听新闻说过Viewport,可是那一个天性已经济体改为活动Web开发的标配,Viewport的<meta>宣示标签在活动Web页面就与<!DOCTYPE html>如出一辙,供给默许注解。

上边是自家引用《四个viewport的传说(第③部分)》中对Viewport的演说(后边会付给小说链接),

不顾,须要把它分为两有个别:visual viewport和layout viewport。
把layout
viewport想像成为一张不会改变大小还是形状的大图。现在设想你有1个小一些的框架,你通过它来看那张大图。(译者:能够知晓为「管窥蠡测」)那个小框架的周围被不透明的资料所环绕,那掩盖了你拥有的视线,只留那张大图的一局地给您。你通过这些框架所能看到的大图的局地正是visual
viewport。当您保持框架(缩短)来看一切图片的时候,你能够不用管大图,只怕您能够接近一些(放大)只看有的。你也得以更改框架的自由化,可是大图(layout
viewport)的分寸和形状永远不会变。

所以,设置<meta name="viewport">时,就也正是在设定visual
viewport的窗口大小、初步缩放等值。这一个值的设定应该遵照产品的骨子里处境来设置,允许用户缩放页面或不允许。

@JeremyWei 的两篇译文,那是本人看过对Viewport解释得最详尽和透彻的稿子:

ppi(Pixel Per Inch)

  • 此地斟酌的是只针对展现设备(其它还有打印照片时的分辨率、打字与印刷精度),指的是显示屏密度。PPI全称为Pixel
    Per
    Inch,译为每英寸像素取值。ppi值越高,单位面积内所占的像素更加多,显示的画质越好。
  • PPi中的pixel指的是大体(设备)像素。

    ca88手机版登录网页 9
    ca88手机版登录网页 10

  • ppi是每台装备的叁个定值,叁个原则性参数,下图以Samsung Galaxy S4为例

    ca88手机版登录网页 11

  • ppi过高带来的题材,相同的图片素材,ppi越高的装置显示越小。下图为贰个分辨率像素在显示器中的地点

    ca88手机版登录网页 12

  • 由于那样的标题存在,高ppi(高清屏)设备下的UI会选择一定的缩放比例,让文本或资料放大(也正是让分辨率像素或CSS像素放大),上面是CSS像素和大体像素的百分比公式:DevicePixelRatio是手提式有线电话机的情理像素与事实上应用像素的缩放比(会随起先提式无线话机暗中认可缩放比和人为缩放浏览器页面改变))

    DevicePixelRatio定义如下:
    
    window.devicePixelRatio = physical pixels / dips(device-independent pixels即CSS像素)
    

    ca88手机版登录网页 13

响应式

作者深信广大前端工程师对响应式并不不熟悉,没吃过猪肉,还没见过猪跑么,对于读者来说响应式不要太驾驭。前面在设备像素比的例子中就早已应用了Media
Queries的特色。

以后,响应式的重点行使场景正是在运动Web中。比如3g.qq.com的首页就是Media
Queries的八个杰出应用场景,使用摩托罗拉5访问3g.qq首页时,会有上边那两种不一致的表现情势:
图4,竖屏状态
ca88手机版登录网页 14

图5,横屏状态
ca88手机版登录网页 15

此时此刻响应式主要会采纳到3类技术:

  • Media Queries
  • 新的尺寸单位
  • 矢量图

对此日前那两类技术,能够参见 @神飞 的两篇小说:

在这,作者想根本说下矢量图。随着活动装备技术的这几年的高速发展,设备物理分辨率出现1个宏大的跨幅,设备像素比也会长久处于1x、2x、3x并存的如此一种处境。

在如此多个时代背景下,图像从UI设计稿中解构出来,还原到页面中的实际呈现效果怎么样兑现包容?这一个标题将会是对开发者的三个庞大的挑衅。

这时,矢量图技术就显示越发有用,当前矢量图技术首要含有以下二种档次:

  • CSS3渐变、阴影、圆角等
  • Icon Font
  • Canvas
  • SVG

CSS3渐变是如今利用最为广泛、包容性最好的,常见的运用场景正是将UI中的渐变背景解构出来,使用CSS3渐变进行渲染。@张鑫旭
的两篇小说很详细的解释了怎样利用CSS3渐变:

Icon Font笔者最早见于Bootstrap 3,后来Tmall也跟进并发表了本人的Icon
Font库http://iconfont.cn/。关于技术本人能够参见一淘的那篇小说《Icon
font 实践

Canvas与SVG由于运算质量和支撑程度的有个别题材,在运动Web开发中并不曾赢得很常见的选用,有趣味的读者能够参考上面包车型客车两篇小说:

对于以往,矢量图技术将是移动Web开发中最有潜力的一种技术,它将为UI解构和页面还原带来一种新的知晓。

dppx(dots per pixel)

  • 意味着单个CSS像素占用的情理像素个数,与DP酷路泽等价,只然则是从微观的角度。

字体

字体呈现不是潜移默化视觉的1个重头戏难题,但本身依旧想提到两句。

是因为iOS与Android使用的系统默许字体分裂,所以暗许普通话字体突显在系统里头会有出入。还有PC字体与活动设备也分裂,所以,在还原UI稿时,平时也会有异样。假如有要求能够使用@font-face来消除一部分应用场景下的书体难题。

在暗中认可字体展现的题目上,@元彦
给出了缓解方案 字体设置最佳实践

那里仅仅只是说了关于暗中认可字体突显的题目,字体显示还有其余更加多难点,有趣味的能够参见mobileTech项目。

dpi(Dots per inch)

  • 对于显示设备的像素密度而言,dpi与ppi是等价的。

ca88手机版登录网页,小结

在实际上的品类开发中,前端工程师更加多时间都是在做交互、包容相关的劳作。从技术上来说,视觉相关的技术也针锋相对简便易行,所以,视觉往往会被忽略掉。在移动Web开发中,视觉也不是单身存在,它起着三个承上启下的效应,影响到互相、包容和属性的每一个局地。

CSS Reference Pixel

  • W3C规定(CSS Reference
    Pixel
    ),把人眼能够辨识到的,距离自身二个两臂展开的长度(约28英寸),像素密度为96dpi装备上的贰个大体像素设为参考像素(指标是为着确认保证CSS像素在分化装备、差别距离观测到的尺寸相同)
  • 通过CSS参考像素可以测算出在不相同的设施上使用合适的CSS像素大小,使得视觉上同一。
    ca88手机版登录网页 16

  • 那就是说难题来了,怎么样履行那个正式吗?通过利用viewport

    <meta name="viewport">
    

viewport

ca88手机版登录网页 17

  • 暗许景况下,手提式有线电电话机显示屏以980px去渲染页面,(下图图像为320px,设备为iphone4)

    ca88手机版登录网页 18

  • 那时经过设置渲染宽度为320px,即为手提式有线话机配备的分辨率,此时图像是充满整个区域的

    ca88手机版登录网页 19

  • 经过地点可得,能够安装width=device-width(手提式有线电话机荧屏分辨率),钦定布局宽度等于手提式有线话机分辨率宽度,能够兑现

    • 为活动装备花费的响应式网页时,你会师临多重分辨率景况,没有须求运用到重量级的mediaquery
    • 制止手提式有线电电话机浏览器选用桌面分辨率宽度(980px等)去渲染页面
    • 协作手提式有线电电话机横屏或竖屏
  • 下边为viewport的形似设置

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
  • 除此以外Viewport还分为两种,Layout Viewport和Visual Viewport
    ca88手机版登录网页 20ca88手机版登录网页 21

还原视觉稿,多屏适配

  • 对此运动端支付而言,为了实现页面高清的效能,视觉稿的行业内部往往会安分守纪以下两点:
    • 先是,选拔一款手提式有线电话机的荧屏宽高作为标准(从前是iphone4的320×480,未来越多的是iphone6的375×667)。
    • 对于retina显示屏(如:
      dpr=2),为了完成高清效果,视觉稿的画布大小会是标准的2倍,也正是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会成为750×1334)。]
  • 字体、高宽间距、图像(图标、图片)
    • 矢量化、字体化、image-set等
    • 在满意急迅支付的需求下,利用 css 将图像限定在要素内( img
      图片采用[max-]width: 100%,背景图像使用background-size
      ),布局只针对成分实行。
  • 多少个难点(详情
    • retina下,图片高清难点
    • retina下,border: 1px问题
    • 多屏适配布局难点
    • 字体大小难点

以下图为例,分析运动Web开发在页面框架结构和布局的法门及差别性(效果图为640px)

ca88手机版登录网页 22

1.永恒中度,宽度自适应

  • 实现

    • viewport width 设置为 device-width,以较大幅度(如
      320px)的视觉稿作为参考举行布局
    • 垂直方向的惊人和距离使用定值,水平方向混合使用定值和百分比抑或采用flex弹性布局
    • 图像成分根据容器使用定值或background-size缩放
    • 代码段

      <meta name="viewport" content="width=device-width,initial-scale=1">
      
  • 要点

    • 是因为中度稳定,宽度自适应,在大显示屏手提式有线电电话机下成分被增加了,所以安插的时候只好设计横向拉伸的要素布局,存在诸多局限性。
    • 以大幅度作为参照是因为一旦布局满足了小增长幅度的摆放,当显示器变宽时,不难的填写空白就能够了(比如新浪情报);而一旦反过来就也许引致“挤坏了”,考虑
      header 区域,左测 logo 右测横向 nav 的情事。
    • 亟待小增长幅度的布局,又须要大幅度面包车型地铁图像,那是2个争执点。
    • 包容性较好。
  • 案例

2.定位宽度,viewport缩放

  • 实现

    • 视觉稿、页面宽度、viewport width
      使用统一宽度,利用浏览器自己缩放实现适配。页面样式(包涵图像成分)完全根据视觉稿的尺码,使用单位px即可。
    • 定位宽度值考虑以下两点:
    • 代码段

      • head尾部(依照显示器宽度来动态生成viewport,生成的 viewport
        基本是那样)

        <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
        
      • css style

        body {
            width: 640px;
            margin: 0 auto;
         }
        

        ca88手机版登录网页 23

  • 优点:
    • 付出简单:缩放交给浏览器,完全按视觉稿切图。
    • 过来精准:相对等比例缩放,能够精准还原视觉稿(不考虑清晰度的地方下)。
    • 测试方便:在PC端即可到位大多数测试,手提式有线电话机端只需商讨调整一些细节(比如图标、字体混合排列时,因为字体不一样造成的对齐难点)。
  • 留存的难点:
    • 像素丢失:对于有个别分辨率较低的无绳电电话机,或然设备像素还未达到规定的标准钦赐的
      viewport
      宽度,此时显示屏的渲染恐怕就不纯粹了。比较常见的是边框“消失”了,可是随最先提式有线电话机硬件的更新,这一个题材会越来越少的。
    • 缩放失效:有个别安卓机不能够健康的依据 meta 标签中 width
      的值来缩放 viewport,必要合营 initial-scale 。
    • 文件折行:存在于缩放失效的机型中,有些手提式有线电话机为了有利于文本的翻阅,在文书到达
      viewport 边缘(非成分容器的边缘)时即开始展览折行,而当 viewport
      宽度被修正后,浏览器并从未正确的重绘,所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该难题。
  • 缓解难点

    • 缩放失效难点需经过 js 动态设定 initial-scale。

      var fixScreen = function() {
          var metaEl = doc.querySelector('meta[name="viewport"]'),
              metaCtt = metaEl ? metaEl.content : '',
              matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
              matchWidth = metaCtt.match(/width=([^,\s]+)/);
      
          if ( metaEl && !matchScale && ( matchWidth && matchWidth[1] != 'device-width') ) {
              var    width = parseInt(matchWidth[1]),
                  iw = win.innerWidth || width,
                  ow = win.outerWidth || iw,
                  sw = win.screen.width || iw,
                  saw = win.screen.availWidth || iw,
                  ih = win.innerHeight || width,
                  oh = win.outerHeight || ih,
                  ish = win.screen.height || ih,
                  sah = win.screen.availHeight || ih,
                  w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                  scale = w / width;
      
              if ( ratio < 1) {
                  metaEl.content += ',initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
              }
          }
      }
      
    • 文本折行难点

      section, p, div,
      h1, h2, h3, h4, h5, h6,
      .fix-break { 
         background: tranparent url('about:blank');
         word-break: break-all;
      }
      
  • 案例

3.rem做宽度,viewport缩放

  • 实现

    • 遵纪守法某一定宽度设定 rem 值(即 html 的
      font-size),页面任何索要弹性适配的因素,尺寸均折算为 rem
      举行布局,不要求适配的因素照旧接纳 px 为单位。
    • 当页面渲染时,遵照页面有效宽度进行计算,调整 rem
      的高低,动态缩放以实现适配的成效。
    • 依据 devicePixelRatio 设定 initial-scale 来放大
      viewport,使页面遵照物理像素渲染,升高清晰度。
    • 通过JS去动态总括根成分的font-size(全部设备均匹配),也得以动用media
      query(包容自个儿网站主流的一些显示屏设备)
    • 基于设备像素比(window.devicePixelRatio)给安装data-dpr
    • 代码段(动态生成 viewport)

      不用写 meta
      标签,该方法mobile-util.js听他们讲dpr 自动生成,并在 html 标签中添加 data-dpr 和 font-size
      八个属性值。

  • 优点:

    • 清晰度高,能落得物理像素的清晰度。
    • 能解决 DPR 引起的“1像素”问题。
    • 向后卓殊较好,就算显示器宽度扩充、PPI 增添该方案依旧适用。
  • 缺点:
    • 适配 js 需尽大概早进入,收缩(防止)viewport 变化引起的重绘。
    • 一点Android机会丢掉 rem 小数部分。
    • 亟待预编写翻译库举办单位转换。
  • 一些只顾的地点

    • chrome当font-size小于12时,rem会依照12来计算,设置基准值要考虑这或多或少。
    • 较小的背景图(比如一些 icon)的 background-size 不要选用具体 rem
      数值,裁剪后会出现边缘丢失。应运用与元素等尺寸切图,设定
      background-size: contain|cover 来缩放。
  • 动态调整 rem 的艺术如下:

    var fixScreen = function() {
        var metaEl = doc.querySelector('meta[name="viewport"]'),
            metaCtt = metaEl ? metaEl.content : '',
            matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
            matchWidth = metaCtt.match(/width=([^,\s]+)/);
    
        if ( !metaEl ) { // REM
            var docEl = doc.documentElement,
                maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
                dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                scale = 1 / dpr,
                tid;
    
            docEl.removeAttribute('data-mw');
            docEl.dataset.dpr = dpr;
            metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
    
            var refreshRem = function() {
                var width = docEl.getBoundingClientRect().width;
                if (width / dpr > maxwidth) {
                    width = maxwidth * dpr;
                }
                var rem = width / 16;
                docEl.style.fontSize = rem + 'px';
            };
    
            //...
    
            refreshRem();
        }
    }
    
  • 案例

4.响应式布局(pc & mobile)

  • 实现
    • 应用 viewport meta 标签在小叔子大浏览器上决定布局
    • 运用 Media Queries 适配对应样式
  • 要点
    • 响应式那种艺术在境内很少有重型企业的复杂的网站在移动端用那种格局去做,首要缘由是做事大,维护性难
    • 适用于中型小型型的派系照旧博客类站点会使用响应式的主意从web
      page到web
      app间接一步到位,因为这么反而能够省去开支,不用再尤其为和谐的网站做多个web
      app的本子。
  • 优点

    • Native APP:Objective-C or Java – 学习话费高
    • Hybrid APP: 外壳+Web APP,需安装。
    • 响应式Web APP:HTML5+JS+CSS – 门槛低,极易上手,迭代快
    • 无需安装花费,迭代更新不难

      ca88手机版登录网页 24

  • 案例

小结

  • 前三种方案为H5页面、手提式有线电话机页面、WAP页、webview页面移动常用方案
  • 率先种方案不得不做一些列表等简便排列的体制,面对更复杂的页面,往往需求相对定位和比例等,尺寸与视觉稿有出入。
  • 其次种和第二种方案不会和规划图有差,第三种方案比第一种方案更灵敏,有两种单位可用,rempx
  • 灵活运用min-height和min-width
  • 能用flex布局的决不采用浮动和相对定位(不便于页面扩充)

一举手一投足支付规范

字体设置

  • 选拔无衬线字体
  • iOS 4.0+ 使用英文字体 Helvetica Neue,以前的iOS版本降级使用
    Helvetica。粤语字体设置为华文甲骨文STHeiTi。
    需补充表达,华文陶文并不设有iOS的字体库中http://support.apple.com/kb/HT5878
    但系统会活动将华文楷体 STHeiTi
    包容命中系统默许汉语字体大篆-简或金鼎文-繁
  • 原生Android下中文字体与英文字体都选用暗许的无衬线字体

    body {
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    }
    

基础交互

  • 安装全局的CSS样式,制止图中的长按弹出菜谱与选汉语本的作为

    a, img {
        -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
    }
    
    html, body {
        -webkit-user-select: none;   /* 禁止选中文本(如无文本选中需求,此为必选项) */
        user-select: none;
    }
    

跨浏览器测试

浏览器包容性:

ca88手机版登录网页 25

  • pc端模拟
    • PC端Chrome浏览器模拟手提式有线电电话机调试页面,布局上差不离和真机上尚未差别了,只是真机能够观看的底细愈多、操作实际环境
  • 真机调节和测试
    • 微信、手提式有线电电话机QQ、QQ浏览器:能够利用腾讯TBS
      studio
      、手提式有线电电话机、usb数据线能够在测试线上页面
    • Android:通过手提式有线电话机chrome、PC
      chrome和usb;连接数据一致能够在手提式有线电话机上chrome浏览器对页面进行调剂。
  • BrowserSync 同步操作

    • 使用node.js command prompt 安装BrowserSync
    • 在node.js command prompt
      在要创制服务器的目录上边执行:browser-sync start –server
      –files=”*” 命令即可,表示创立1个服务器并监听该目录下的文书变动

      ca88手机版登录网页 26

      让手机与计算机处于同一局域网下,能够采用总括机分享热点手机连接(如360有线wifi +
      网卡)

  • 越多更详尽测试方案

施行应用

  • demo1(运用的是第二种方案,不过某个成分中度没有稳定,而是自适应,以此适应图片的缩放。)

参考资料

开始展览阅读

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图