必赢亚洲手机app下载


玩吃鸡游戏

微信页面怎么测试

活动Web布局

举手投足Web开发之移动页面布局

前言

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

深入概念引出viewport

366net必赢亚洲手机版 1

Pixel

  • 装备像素

    • 在LCD呈现器中,基于点阵排列,每一个像素右由红绿蓝子像素结合

    366net必赢亚洲手机版 2

    • CRT显示器

      366net必赢亚洲手机版 3

  • CSS像素(用于控制元素样式的样式单位像素,是一个相对值)

    • CSS像素与屏幕像素1:1一样大刻钟:

      366net必赢亚洲手机版 4

    • 浏览器窗口宽度一定的情状下,把页面放大(Ctrl+),CSS像素(粉红色边框)开首被拉伸,此时1个CSS像素大于1个屏幕像素

      366net必赢亚洲手机版 5

ppi(Pixel Per Inch)

  • 这里研讨的是只针对呈现设备(其余还有打印照片时的分辨率、打印精度),指的是屏幕密度。PPI全称为Pixel
    Per
    Inch,译为每英寸像素取值。ppi值越高,单位面积内所占的像素越多,突显的画质越好。
  • PPi中的pixel指的是大体(设备)像素。

    366net必赢亚洲手机版 6
    366net必赢亚洲手机版 7

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

    366net必赢亚洲手机版 8

  • ppi过高带来的问题,相同的图片素材,ppi越高的设备显示越小。下图为一个分辨率像素在屏幕中的地方

    366net必赢亚洲手机版 9

  • 出于这样的题目存在,高ppi(高清屏)设备下的UI会接纳一定的缩放比例,让文本或资料放大(也就是让分辨率像素或CSS像素放大),下边是CSS像素和大体像素的百分比公式:DevicePixelRatio是手机的大体像素与事实上行使像素的缩放比(会趁机手机默认缩放比和人造缩放浏览器页面改变))

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

    366net必赢亚洲手机版 10

dppx(dots per pixel)

  • 表示单个CSS像素占用的情理像素个数,与DPR等价,只但是是从微观的角度。

dpi(Dots per inch)

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

CSS Reference Pixel

  • W3C规定(CSS Reference
    Pixel
    ),把人眼可以辨识到的,距离自己一个胳膊长度(约28英寸),像素密度为96dpi装置上的一个物理像素设为参照像素(目标是为了保险CSS像素在不同装备、不同距离观测到的深浅一样)
  • 通过CSS参考像素可以测算出在不同的装置上利用方便的CSS像素大小,使得视觉上一致。
    366net必赢亚洲手机版 11

  • 那么问题来了,怎样履行这么些专业吧?通过利用viewport

    <meta name="viewport">
    

viewport

366net必赢亚洲手机版 12

  • 366net必赢亚洲手机版,默认情形下,手机屏幕以980px去渲染页面,(下图图像为320px,设备为iphone4)

    366net必赢亚洲手机版 13

  • 那会儿由此设置渲染宽度为320px,即为手机设备的分辨率,此时图像是满载整个区域的

    366net必赢亚洲手机版 14

  • 因而地点可得,可以设置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
    366net必赢亚洲手机版 15366net必赢亚洲手机版 16

复原视觉稿,多屏适配

  • 对此运动端支出而言,为了完成页面高清的职能,视觉稿的业内往往会遵守以下两点:
    • 首先,选拔一款手机的屏幕宽高作为基准(往日是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)

366net必赢亚洲手机版 17

1.稳定中度,宽度自适应

  • 实现

    • viewport width 设置为 device-width,以较小增幅(如
      320px)的视觉稿作为参考举办布局
    • 垂直方向的可观和间隔使用定值,水平方向混合使用定值和百分比要么应用flex弹性布局
    • 图像元素按照容器使用定值或background-size缩放
    • 代码段

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

    • 由于中度稳定,宽度自适应,在大屏幕手机下元素被拉开了,所以计划的时候只得设计横向拉伸的要素布局,存在不少局限性。
    • 以小增幅作为参照是因为一旦布局满意了小增幅的摆放,当屏幕变宽时,简单的填写空白就可以了(比如新浪信息);而假若反过来就可能引致“挤坏了”,考虑
      header 区域,左测 logo 右测横向 nav 的意况。
    • 亟需小增幅的布局,又需要大幅面的图像,这是一个抵触点。
    • 兼容性较好。
  • 案例

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;
         }
        

        366net必赢亚洲手机版 18

  • 优点:
    • 付出简单:缩放交给浏览器,完全按视觉稿切图。
    • 平复精准:相对等比例缩放,可以精准还原视觉稿(不考虑清晰度的情事下)。
    • 测试方便:在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 – 门槛低,极易上手,迭代快
    • 不必安装成本,迭代立异容易

      366net必赢亚洲手机版 19

  • 案例

小结

  • 前两种方案为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;
    }
    

跨浏览器测试

浏览器兼容性:

366net必赢亚洲手机版 20

  • 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=”*” 命令即可,表示创设一个服务器并监听该目录下的文件变动

      366net必赢亚洲手机版 21

      让手机与电脑处于同一局域网下,可以使用微机分享热点手机连接(如360有线wifi +
      网卡)

  • 更多更详尽测试方案

施行应用

  • demo1(运用的是第一种方案,不过有些元素中度没有固定,而是自适应,以此适应图片的缩放。)

参考资料

进展阅读

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图