精华内容
下载资源
问答
  • web兼容手机
    2021-07-01 17:21:32

    一直以来,Web前端领域最大的问题就是兼容性问题

    前端兼容性问题分三类:

    浏览器兼容性
    屏幕分辨率兼容性
    跨平台兼容性

    浏览器兼容性问题

    IE6、7、8不支持HTML5、CSS3、SVG标准,可被判定为“极难兼容”

    IE9不支持Flex、Web Socket、WebGL,可被判定为“较难兼容”

    IE10部分支持Flex(-ms-flexbox)、Web Socket,可被判定为“较易兼容”

    IE11部分支持Flex、WebGL,可被判定为“较易兼容”

    IE6、7、8、9可视为“老式浏览器”

    IE10、11可视为“准现代浏览器”

    Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”

    屏幕分辨率兼容性问题

    在不同的屏幕分辨率,浏览器页面展示差异很大。特别是屏幕分辨率较小时,容易发生布局错乱。为了解决这个问题,响应式UI框架应运而生
    现在新的UI框架基本都支持响应式
    element ui ,ivew ,antd 等。。。。。

    浏览器兼容策略

    国内XP用户还有3.29%,XP用户既升级不了IE9,也无法安装新版本Chrome和Firefox 。而IE用户还有 5.65%,考虑到Windows用户为87%,所以IE9+的份额应该要少于5.65%-3.29%*87%=2.79%。也就是说IE8以下的用户要多于IE8以上的用户。所以支持单独支持IE9+ 浏览器没有实际意义,要么支持IE6,要么不支持IE,。

    看看知名网站对IE8的兼容性,

    京东会提示“温馨提示:您当前的浏览器版本过低,存在安全风险,建议升级浏览器”,但是页面完全可以正确显示,几乎没有什么异常发生,看来兼容工作很到位。
    淘宝会出现很多页面异常,说明IE兼容工作要求不高,基本正常即可,只是象征性的加了几条兼容性内容。
    去哪儿网也会出现很多页面异常,但页面布局还是正常的,看来也是尽力而为,不做要求。
    腾讯的页面只有一个立即更新按钮,一贯地友好。
    知乎直接404,好吧,强大。

    兼容IE的建议:

    一、建议不做任何兼容,IE6~11直接显示升级浏览器按钮。

    二、如果一定要兼容,后端返回IE专用页面,至少兼容IE8。

    屏幕分辨率兼容策略

    屏幕分辨率最少要考虑兼容便携屏幕和移动屏幕两种。可以参考去哪儿网的做法,把内容分成三类:移动端主菜单与导航栏;主要内容;扩展内容。屏幕分辨率高于480,显示主要内容、扩展内容。屏幕分辨率低于480,显示移动端主菜单与导航栏、主要内容。
    如果你的应用是管理软件,则最好考虑兼容桌面屏幕、便携屏幕和移动屏幕三种。Bootstrap5新增了超超大屏幕,则就是基于这种考虑。这时候,可以加入侧边栏自动隐藏/打开,主要内容用Flex方式组织,可以在页面中并排显示多页(类似于Word的页面视图)。

    跨平台兼容策略

    大型网站,手机网站与桌面网站是不同的入口,因此不存在兼容,是两个单独的应用程序。对于流量较小的网站,平台的兼容策略主要是应用响应式框架,加上移动端主菜单与导航栏即可,其次可以选用跨平台框架来实现在不同平台的差异化体验。没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用,则需要认真考虑这些框架,毕竟用户对本地应用的体验期待要高很多。

    更多相关内容
  • APP手机兼容性及电脑WEB兼容性测试方法
  • Web前端如何快速的兼容手机

    千次阅读 2019-07-08 15:27:35
    如何快速的做到手机端的页面兼容 为什么要写这篇文章 前段时间做了一个项目,客户要求最低兼容Iphone5S 在线上运营的项目,客户总是提出兼容很差的问题,之前一直拖着,不曾解决,现在统计处理一下 学习重点 ...

    如何快速的做到手机端的页面兼容


       为什么要写这篇文章

    1. 前段时间做了一个项目,客户要求最低兼容Iphone5S
    2. 在线上运营的项目,客户总是提出兼容很差的问题,之前一直拖着,不曾解决,现在统计处理一下

       学习重点

         lib-flexible插件

     正文


      前端兼容的痛点

          在实际项目开发过程中,作为前段经验并不丰富的后端开发人员,总是会在UI上栽跟头。手机中实际展示效果总是跟模拟器中的展示效果差之千里。

     

    举个例子,左边,为我在chrome浏览器中调试的页面,右侧为IPhone5s打开之后的页面效果。

    这样的页面,别说客户无法忍受,如果这个页面不是我写的,我必然会找到那个始作俑者,把这个页面的截图狠狠的甩到她脸上,问她,你是怎么做的?这样的页面让客户怎么看,这样的按钮,让用户怎么点,难道想点个累计扫码,一不小心手指稍稍偏了一点儿,页面就关闭了?

    作为一个还算合格的后端开发人员。

    我保证,我确信,我真的已经努力做了兼容,所有高度都是动态分配,包括页面高度,都由Js根据屏幕可见高度努力算出来,可为什么呈现给用户的效果还会是这样?这样的惨不忍睹。

    代码可以分享给大家:

     //获取屏幕的高度
     var screenHeight = window.screen.availHeight;
     //奖项Div距离顶部的高度,为页面总高度的4.5分之一
     $(self._contentPrize).css("margin-top", screenHeight / 4.5);
    
     //初始化红包弹出框
    
     //红包Div距离顶部的高度为自己高度的20%
     $("#redPackageContent").css("padding-top", $("#redPackageContent").height() * 0.20);
     //红包金额的Div显示距离顶部为红包页面高度的15%
     $("#redPackageInfo").css("padding-top", $("#redPackageContent").height() * 0.15);
     //红包页面底部的按钮Padding红包页面的高度为红包页面高度的20%
     $("#redPackagebutton").css("padding-top", $("#redPackageContent").height() * 0.20);

    这段代码是试出来的最佳高度,可能没有任何逻辑可言。在一塌糊涂的UI面前,程序员的逻辑已被击溃。

    刚开始我以为是微信浏览器自带底部导航栏的问题,但,将导航栏的底部高度减去之后,依然无法做到兼容。就算做到兼容主流手机,依然无法保证做到全兼容。

     主流手机的分辨率

           苹果手机:

    手机型号手机尺寸分辨率
    iPhone 4S3.5寸960 × 640
    iPhone 5(5S/5C)4.0寸1136 x 640
    iPhone 64.7寸1334 x 750
    iPhone 6 Plus5.5寸2208 x 1242 (1920x1080)
    iPhone 6S4.7寸1334 x 750
    iPhone 6S Plus5.5寸2208 x 1242 (1920x1080)
    iPhone SE4寸1136 x 640
    iPhone 74.7寸1334 x 750
    iPhone 7 Plus5.5寸2208 x 1242 (1920x1080)
    iPhone 84.7寸1334 x 750
    iPhone 8 Plus5.5寸2208 x 1242 (1920x1080)
    iPhone X5.8寸2436 × 1125

           华为手机:

    华为P30Pro6.47寸2340×1080
    华为 Mate 206.53寸2244×1080
    华为畅享9 PLUS6.5寸2340×1080
    华为 Mate 20 Pro6.39寸3120x1440
    华为P306.1寸2340×1080
    华为Nova 46.4寸2310 x 1080 
    华为Nova 4e6.15寸2312×1080
    华为Nova 56.39寸2340x1080
    华为 Mate 20 X7.2寸2244x1080
    华为麦芒 86.21寸2340x1080
    华为 Mate 20 RS 6.39寸3120x1440
    华为畅享9S6.21寸2340x1080
    华为畅享96.26寸1520x720
    华为 P20 Pro6.1寸2240x1080
    华为 nova 5i6.4寸2310×1080
    华为畅享 9e6.09寸1560x720
    华为 P205.8寸2244×1080
    华为 畅享 MAX7.12寸2244×1080
    华为 nova 3i6.3寸2340×1080
    华为 nova 36.3寸2340 x 1080
    华为 mate 10 pro6.0寸2160x 1080
    华为 nova 2s6.0寸2160x1080
    华为 畅享8e5.7寸1440*720
    华为 麦芒76.3寸2340 x 1080
    华为 nova 2 Plus5.5寸1920x 1080
    华为 畅享8 Plus5.93寸2160x 1080
    华为 nova 青春版5.2寸1920x 1080
    华为 nova 3e5.84寸2280x1080
    华为 Mate 95.9寸1920x1080
    华为 畅享7 Plus5.5寸1280x720
    华为 P105.1寸1920x1080
    华为 麦芒65.9寸2160x1080
    华为 P10 Plus5.5寸2560 x 1440
    华为 畅享 8e 青春5.45寸1440x72

     lib-flexible插件

       为彻底解决兼容的问题,在众多兼容插件中找到了最适合自己的lib-flexible插件,该插件主要使用rem进行布局。

    1. 前期准备工作
    2. 插件原理

       前期准备工作


       在使用该插件前,我们只需要做两件事情,

       第一,下载 lib-flexible.js文件并引用至我们的项目当中。

       第二,设置viewport,设置代码如下:

    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

            这样设置的目的在于网页在设备内的页面宽度就会等于逻辑设备像素大小。

     第三,在body中添加如下设置:

    <body ontouchstart></body>

    插件原理


       lib-flexible插件是基于设备的宽度的像素为基础像素,也就是device-width。在插件中,统一认为设备的宽度为10rem。再根据该设备的宽度像素,计算出1rem所占像素。

     device-width的计算公式为:

    设备的物理分辨率/(devicePixelRatio * scale),在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio 

    devicePixelRatio称为设备像素比,每款设备的devicePixelRatio都是已知,并且不变的,目前高清屏,普遍都是2,不过还有更高的,比如2.5, 3 等,魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置。

    这么做目的当然是为了保证页面的大小与设计稿保持一致了,比如设计稿如果是750的横向分辨率,那么实际页面的device-width,以iphone6来说,也等于750,这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下。

    var scale = 1 / devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    lib-flexible布局的第二个要点,就是html元素的font-size的计算公式,font-size = deviceWidth / 10:

    接下来要解决的问题是,元素的尺寸该如何计算,比如说设计稿上某一个元素的宽为150px,换算成rem应该怎么算呢?这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px的宽,换算成rem就是150 / 75 = 2rem。总结下淘宝的这些做法:

    1. 动态设置viewport的scale
      var scale = 1 / devicePixelRatio;
      document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    2. 动态计算html的font-size
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    3. 布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
    4. font-size可能需要额外的媒介查询,并且font-size不使用rem。

     最后。lib-flexible设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会再变化。

    展开全文
  • web qq 聊天 js 静态 手机 移动 pc 即时通 响应式,webQQ响应式兼容手机web和pcweb的聊天纯JS的静态页面和效果,可以配上websocket和后台交互
  • 这两天开始编写手机页面,作为类似官网一样的使用,因为实在手机端访问的web端,没有做过尝试,而且由于手机的种类很多,导致兼容性要求很高,在网上找了一些教程,制作完毕后决定分析给大家。先给大家看下成品效果...

    这两天开始编写手机页面,作为类似官网一样的使用,因为实在手机端访问的web端,没有做过尝试,而且由于手机的种类很多,导致兼容性要求很高,在网上找了一些教程,制作完毕后决定分析给大家。

    先给大家看下成品效果图:

    053e45e814c54f761ed848231722865a.png

    这就是手机访问之后的样子了,那具体怎么做好兼容,又能省事省力呢,我从网上找到了这个框架:

    9141258a7b09109d3d6759246a3447d1.png

    直接百度:ydui,这是一个专门为移动端web前端使用框架,使用方式也很简单,打开这个网站点击开始使用

    这是测试页面,我们只需要下载这个框架的文件就行了,之后调用上面代码中调用到的css,以及js即可,之后所有的内容写在class为g-view的div中,这个框架就可以自动帮你调整兼容性了,需要注意的是,这是移动端框架,所以只支持移动端,如果是pc端或者平板访问可能就不会很兼容了。

    为了和团队开发大小规范,一般移动端的单位都是rem,所以不能再用px作为单位了,可是作为设计还是会给你px的图纸,为此我们就需要自己计算好单位换算即可。

    展开全文
  • 可以兼容手机识别,解决了手机长按的时候 光标错位问题
  • 兼容性超好的三个HTML视频播放器代码,vediojs,hlsplayer;flowplayer,亲测能用,兼容绝大多数手机浏览器,其中vediojs,hlsplayer;兼容性比flowplayer更好
  • js代码 [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] ...这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
  • web兼容性测试

    2014-05-13 10:14:13
    web兼容性测试
  • 手机端、网页端签到日历,HTML/CSS/JS编写 适应性强 使用方便,亲测可用。
  • 兼容手机端HTML5企业模板里面包含5个子页面,适合设计公司企业网站模板。
  • web网站如何实现兼容手机

    千次阅读 2018-06-25 10:56:00
    web网站如何实现兼容手机 一、总结 一句话总结:加上这句话即可:&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;。 1、移动设备上的三个viewport是哪三个,分别代表...

    web网站如何实现兼容手机

    一、总结

    一句话总结:加上这句话即可:&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;。

     

    1、移动设备上的三个viewport是哪三个,分别代表什么?

    ppk把移动设备上的viewport分为layout viewportvisual viewport ideal viewport 三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户

     

    2、移动设备上的理想视图区域是什么?

    就是屏幕的物理宽度。

     

    3、css中的1px并是否等于移动设备的1px,为什么

    不等于,因为在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。

     

    4、影响css的px与物理设备px的因素有哪些?

    手机设备和用户缩放。

    还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于这点,在文章后面的部分还会讲到。

     

    5、要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但是最后为什么我们两个一起用?

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

     

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

     

    6、手机浏览器为了兼容桌面网站,做了什么样的操作?

    浏览器默认的viewport叫做 layout viewport,手机浏览器把默认的viewport的宽度值设置为为800px,980px,1024px等这些。

     

     

    二、meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

    content属性值 :
    width:可视区域的宽度,值可为数字或关键词device-width
    height:同width
    intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
    maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
    maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
    user-scalable:是否可对页面进行缩放,no 禁止缩放
     
    复杂的说:

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

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

    一、viewport的概念

    通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

    1

     

    二、css中的1px并不等于设备的1px

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。

    还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于这点,在文章后面的部分还会讲到。

    在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章

    devicePixelRatio的测试结果:

    14

     

    三、PPK的关于三个viewport的理论

    ppk大神对于移动设备上的viewport有着非常多的研究(第一篇第二篇第三篇),有兴趣的同学可以去看一下,本文中有很多数据和观点也是出自那里。ppk认为,移动设备上有三个viewport。

    首先,移动设备上的浏览器认为自己必须能让所有的网站都正常显示,即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话,因为移动设备的屏幕都不是很宽,所以那些为桌面浏览器设计的网站放到移动设备上显示时,必然会因为移动设备的viewport太窄,而挤作一团,甚至布局什么的都会乱掉。也许有人会问,现在不是有很多手机分辨率都非常大吗,比如768x1024,或者1080x1920这样,那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧?前面我们已经说了,css中的1px并不是代表屏幕上的1px,你分辨率越大,css中1px代表的物理像素就会越多,devicePixelRatio的值也越大,这很好理解,因为你分辨率增大了,但屏幕尺寸并没有变大多少,必须让css中的1px代表更多的物理像素,才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多,不然就会因为太小而看不清。所以在1080x1920这样的设备上,在默认情况下,也许你只要把一个div的宽度设为300多px(视devicePixelRatio的值而定),就是满屏的宽度了。回到正题上来,如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。

    然而,layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取,但在Android 2, Oprea mini 和 UC 8中无法正确获取。

    2 3

    现在我们已经有两个viewport了:layout viewportvisual viewport。但浏览器觉得还不够,因为现在越来越多的网站都会为移动设备进行单独的设计,所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。

    ideal viewport并没有一个固定的尺寸,不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在iphone中,css中的320px就代表iphone屏幕的宽度。

    4 5

    但是安卓设备就比较复杂了,有320px的,有360px的,有384px的等等,关于不同的设备ideal viewport的宽度都为多少,可以到http://viewportsizes.com去查看一下,里面收集了众多设备的理想宽度。

    再总结一下:ppk把移动设备上的viewport分为layout viewportvisual viewport ideal viewport 三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。

     

    四、利用meta标签对viewport进行控制

    移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。

    我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

    这个name为viewport的meta标签到底有哪些东西呢,又都有什么作用呢?

    meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。

    在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

    width设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
    initial-scale设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale允许用户的最大缩放值,为一个数字,可以带小数
    height设置layout viewport 的高度,这个属性对我们并不重要,很少使用
    user-scalable是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

    这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

    此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素

    target-densitydpi值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

    特别说明的是,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。

    因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi 这个属性了,所以这个属性我们要避免进行使用 。

     

    五、把当前的viewport宽度设置为 ideal viewport 的宽度

    要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度,所以我们只需要把width设为width-device这个特殊的值就行了。

    <meta name="viewport" content="width=device-width">

    下图是这句代码在各大移动端浏览器上的测试结果:

    6

    可以看到通过width=device-width,所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度,但要注意的是,在iphone和ipad上,无论是竖屏还是横屏,宽度都是竖屏时ideal viewport的宽度。

    这样的写法看起来谁都会做,没吃过猪肉,谁还没见过猪跑啊~,确实,我们在开发移动设备上的网页时,不管你明不明白什么是viewport,可能你只需要这么一句代码就够了。

    可是你肯定不知道

    <meta name="viewport" content="initial-scale=1">

    这句代码也能达到和前一句代码一样的效果,也可以把当前的的viewport变为 ideal viewport。

    呵呵,傻眼了吧,因为从理论上来讲,这句代码的作用只是不对当前的页面进行缩放,也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢?

    要想清楚这件事情,首先你得弄明白这个缩放是相对于什么来缩放的,因为这里的缩放值是1,也就是没缩放,但却达到了 ideal viewport 的效果,所以,那答案就只有一个了,缩放是相对于 ideal viewport来进行缩放的,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,不就得到了 ideal viewport吗?事实证明,的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=1"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。

    7

    测试结果表明 initial-scale=1 也能把当前的viewport宽度变成 ideal viewport 的宽度,但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。

    但如果width 和 initial-scale=1同时出现,并且还出现了冲突呢?比如:

    <meta name="viewport" content="width=400, initial-scale=1">

    width=400表示把当前viewport的宽度设为400px,initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度,那么浏览器到底该服从哪个命令呢?是书写顺序在后面的那个吗?不是。当遇到这种情况时,浏览器会取它们两个中较大的那个值。例如,当width=400,ideal viewport的宽度为320时,取的是400;当width=400, ideal viewport的宽度为480时,取的是ideal viewport的宽度。(ps:在uc9浏览器中,当initial-scale=1时,无论width属性的值为多少,此时viewport的宽度永远都是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的毛病:

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

     

    六、关于meta viewport的更多知识

    1、关于缩放以及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宽度

    ps: 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默认值。

    根据测试,我们可以在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的宽度就是屏幕的宽度)的目的。

    11 12 13

     

    2、动态改变meta viewport标签

    第一种方法

    可以使用document.write来动态输出meta viewport标签,例如:

    document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

    第二种方法

    通过setAttribute来改变

    <meta id="testViewport" name="viewport" content="width = 380">
    <script>
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=480');
    </script>

     

     

    安卓2.3自带浏览器上的一个bug

    复制代码
    <meta name="viewport" content="width=device-width">
    
    <script type="text/javascript">
    alert(document.documentElement.clientWidth); //弹出600,正常情况应该弹出320
    </script>
    
    <meta name="viewport" content="width=600">
    
    <script type="text/javascript">
    alert(document.documentElement.clientWidth); //弹出320,正常情况应该弹出600
    </script>
    复制代码

    测试的手机ideal viewport 宽度为320px,第一次弹出的值是600,但这个值应该是第行meta标签的结果啊,然后第二次弹出的值是320,这才是第一行meta标签所达到的效果啊,所以在安卓2.3(或许是所有2.x版本中)的自带浏览器中,对meta viewport标签进行覆盖或更改,会出现让人非常迷糊的结果。

     

    七、结语

    说了那么多废话,最后还是有必要总结一点有用的出来。

    首先如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。

    第二、每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系,在css中,这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device-width这个特殊值就行了,同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以,我们可以使用

    <meta name="viewport" content="width=device-width, initial-scale=1">
    来得到一个理想的viewport(也就是前面说的ideal viewport)。

    为什么需要有理想的viewport呢?比如一个分辨率为320x480的手机理想viewport的宽度是320px,而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px,那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢?这是因为,只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上,现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机,但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种,都是非常接近的,理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站,在其他设备上的表现也不会相差非常多甚至是表现一样的。

     

     

     

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9223327.html

    展开全文
  • web专项测试之兼容性测试
  • HLS(m3u8)web页面和手机播放案例。 1.HLS视频服务器需要配置可跨域文件(crossdomain.xml) 可参考https://www.jianshu.com/p/59a5d22a24c6 2.项目需要用tomcat或iis等服务器加载 3.讲index.html中的视频地址换成...
  • 利用WebSocke+Ueditor实现兼容手机端页面的WEB实时编辑器 页面也简陋, 主要是提供一个思路。
  • 本发明涉及计算机互联网技术,特别涉及一种兼容PC端和手机WEB界面的实现方法。背景技术:随着互联网的发展,越来越多的产品需要同时兼容PC端和手机端,目前使用的技术一般是响应式布局,复杂的界面,或者前端经常...
  • 一个项目,既要兼容pc 端、移动端(android、ipad)网页,又要有app。我是前端开发,所以想使用 B/S 架构,有浏览器就可以打开,pc 移动都可以,问题是app。 之前想着用hunbuder打包页面,但项目不是一个固定的地址...
  • 1、click300ms延迟 fastclick可以解决在手机上点击事件的300...若移动设备兼容性正常的话(IE/Firefox/Safari(IOS 9.3)及以上),只需加上一个meta标签 把viewport设置成设备的实际像素,那么就不会有这300ms的延迟。
  • WEB前端开发-移动端兼容性问题汇总

    万次阅读 2018-04-09 17:21:23
    最近更新时间:2018年4月9日16:50:05 作为一名专业的web前端开发工程师,必须时刻谨记自己的使命和价值,能够独立处理日常开发任务中的常规问题,并且善于总结和积累实践经验。前言:1、移动端开发需要加入的代码:...
  • 我现在做的需求是实现人脸识别登录,使用h5编写页面,发现写好的js代码只可以在手机qq浏览器下运行,求大神指教怎么解决这个问题? 下面附上js代码: var aVideo=document.getElementById('video'); var aCanvas=...
  • [ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性。先给大家看下演示 demo 的运行...④ 演示 Demo:Web端、移动端兼容性效果展示
  • html手机WEB纯静态页面 我这个是一个点餐系统的web 手机端静态页面,兼容主流的浏览器。
  • 1为什么要有兼容性测试:比web浏览器还恐怖的手机浏览器  对于web网站,一般来说,目前我们需要兼容的是  1个操作系统(windows)X3种浏览器(ie6、ie7、firefox)=3种情况  要求高一点的web网站需要兼容的是  1个...
  • Web兼容性测试--浏览器/平台/分辨率

    千次阅读 多人点赞 2019-04-02 09:53:40
    兼容性测试主要是针对不同的操作系统平台,浏览器,以及分辨率进行的测试。由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题。因此我们就需要对网页进行兼容性测试。对于应用,我们...
  • 手机web焦点图片

    2018-12-18 08:21:26
    简单实用的手机端网站焦点图滚动效果代码。兼容主流手机浏览器
  •  <meta name="apple-mobile-web-app-status-bar-style" content="black" />  d、<!-- 禁止了把数字转化为拨号链接 -->    e、<!-- 浏览网站时的小图标 -->  ...
  • vue中web手机端的适配问题

    千次阅读 2020-09-02 10:58:01
    vue中web手机端的适配问题 在使用vue进行web手机端适配时可以使用rem做单位进行适配。rem为相对单位,是相对HTML根元素的字体大小为基准计算大小。如设置html:{font-size:16px},那么p{font-size: 1rem}的字体大小就...
  • // #ifdef APP-PLUS plus.runtime.openURL(popup.url.path) return // #endif window.location.href = popup.url.path 很简单就这样
  • 移动端 ...现在手机花里胡哨的,全面屏、曲面屏、3D屏、刘海屏、挖孔屏、越来越多,所以我们也需要测试一下系统状态栏 7、涉及到蓝牙、耳机,看对应功能需要了 —————————————————

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,281
精华内容 27,312
关键字:

web兼容手机