精华内容
下载资源
问答
  • web网站如何实现兼容手机

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

    web网站如何实现兼容手机

    一、总结

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

     

    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 qq 聊天 js 静态 手机 移动 pc 即时通 响应式,webQQ响应式兼容手机web和pcweb的聊天纯JS的静态页面和效果,可以配上websocket和后台交互
  • web兼容性概述 定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息。随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越...

    web兼容性概述

     

    定义:软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息。随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重要。软件兼容性测试工作的目标是保证软件按照用户期望的方式进行交互

    平台的兼容性:

    硬件平台:pc 手机 pad等,

    操作系统:Android iOS Windows mac linux。

    浏览器:谷歌浏览器 火狐浏览器 IE浏览器等。

     

    web兼容性测试:以浏览器兼容性为主,操作系统和分辨率为辅。

    明确需求:根据用户需求 去找浏览器,市场占有率的浏览器(浏览器最近的三个版本)

    操作系统:安装虚拟机。

     

    浏览器市场占有率

     

    浏览器内核阵营

     

     

     

    操作系统

    安装虚拟机,在虚拟机上安装Linux系统等

     

    主流分辨率

     一般电脑屏幕分辨率  19120X1080 ,1366X768,1440X900,1600X900 根据CNZZ统计客户端信息查询得到。

     

    web兼容性测试矩阵图

     

     

     

    web浏览器见兼容性-测试点

    界面:

    1.开发出来的web程序,在不同的浏览器上运行,所展示的界面是否相符。

    2.比如字体是否有错位,重叠,或者显示不全,窗体是否有异常拉伸与缩进,图片是否在指定位置显示。

    3.有些程序在不同的浏览器运行,界面不一样,但是能实现相同的功能,这也是可以的。不是产品缺陷,因为不同的浏览器所使用的渲染引擎不一样。

     控件:

    对于web应用程序上某个控件,在不同的浏览器上,是否都能正常运行。比如窗体上的按钮在不同的浏览器上是否都可以点击,输入框里是否可以正常输入字符,输入字符的长度在不同的浏览器是否相同,在输入字符边界值的保护上,每个浏览器是否相同。

    图片:

    比较页面上显示的图片在不同的浏览器上大小是否相同,质量是否有差异,有没有被拉伸或者伸缩。

    动画:

    在web应用程序里设计出来的图片动画,Java applet动画或者flask动画,在不同的浏览器里,是否都可以正常播放。有些动画,比如Java,flask是需要安装相应的插件支持的,我们可以测试插件没有安装之前和安装后的显示结果。

    响应时间:

    点击web程序的某一个功能选项,在不同的浏览器里响应时间是否有差异,如果响应时间太长应该就是缺陷,需要处理。

     

    链接:

    在web页面或者窗口上有链接的地址,测试在不同浏览器点击这些链接,是否能够正常打开。页面能否正常跳转。点击链接后有没有造成页面冻结或者崩溃现象。

     

     

    兼容性测试要点:

    主流程 主要功能 界面 控件  图片 动画 响应时间 链接

     

    web兼容性测试工具

     Browsershots: http:// Browsershots.org/

     letester: http://www.letester.cn/

    MulitiBroswer

     

    browsershots 操作方法

     

     

     

     

    兼容性测试要单独写代码吗(挑选一部分,复用)。什么时候进行测试(主要功能测试完成)

     

    转载于:https://www.cnblogs.com/Chamberlain/p/11064664.html

    展开全文
  • 如何快速的做到手机端的页面兼容 为什么要写这篇文章 前段时间做了一个项目,客户要求最低兼容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 4S 3.5寸 960 × 640
    iPhone 5(5S/5C) 4.0寸 1136 x 640
    iPhone 6 4.7寸 1334 x 750
    iPhone 6 Plus 5.5寸 2208 x 1242 (1920x1080)
    iPhone 6S 4.7寸 1334 x 750
    iPhone 6S Plus 5.5寸 2208 x 1242 (1920x1080)
    iPhone SE 4寸 1136 x 640
    iPhone 7 4.7寸 1334 x 750
    iPhone 7 Plus 5.5寸 2208 x 1242 (1920x1080)
    iPhone 8 4.7寸 1334 x 750
    iPhone 8 Plus 5.5寸 2208 x 1242 (1920x1080)
    iPhone X 5.8寸 2436 × 1125

           华为手机:

    华为P30Pro 6.47寸 2340×1080
    华为 Mate 20 6.53寸 2244×1080
    华为畅享9 PLUS 6.5寸 2340×1080
    华为 Mate 20 Pro 6.39寸 3120x1440
    华为P30 6.1寸 2340×1080
    华为Nova 4 6.4寸 2310 x 1080 
    华为Nova 4e 6.15寸 2312×1080
    华为Nova 5 6.39寸 2340x1080
    华为 Mate 20 X 7.2寸 2244x1080
    华为麦芒 8 6.21寸 2340x1080
    华为 Mate 20 RS  6.39寸 3120x1440
    华为畅享9S 6.21寸 2340x1080
    华为畅享9 6.26寸 1520x720
    华为 P20 Pro 6.1寸 2240x1080
    华为 nova 5i 6.4寸 2310×1080
    华为畅享 9e 6.09寸 1560x720
    华为 P20 5.8寸 2244×1080
    华为 畅享 MAX 7.12寸 2244×1080
    华为 nova 3i 6.3寸 2340×1080
    华为 nova 3 6.3寸 2340 x 1080
    华为 mate 10 pro 6.0寸 2160x 1080
    华为 nova 2s 6.0寸 2160x1080
    华为 畅享8e 5.7寸 1440*720
    华为 麦芒7 6.3寸 2340 x 1080
    华为 nova 2 Plus 5.5寸 1920x 1080
    华为 畅享8 Plus 5.93寸 2160x 1080
    华为 nova 青春版 5.2寸 1920x 1080
    华为 nova 3e 5.84寸 2280x1080
    华为 Mate 9 5.9寸 1920x1080
    华为 畅享7 Plus 5.5寸 1280x720
    华为 P10 5.1寸 1920x1080
    华为 麦芒6 5.9寸 2160x1080
    华为 P10 Plus 5.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就不会再变化。

    展开全文
  • 利用WebSocke+Ueditor实现兼容手机端页面的WEB实时编辑器 页面也简陋, 主要是提供一个思路。
  • APP/web兼容性测试

    2020-06-13 17:42:07
    三、手机兼容(APP) 1、品牌 2、系统(iOS10.x,11.x,12.x,13.x/Android5,6,7,8,9,10) 3、型号 4、屏幕尺寸 5、分辨率 问题: 1、什么情况下需要做兼容性测试? (1)公司内部人员使用的网站,如后台管理系统/老板/...

    一、浏览器兼容测试(web)
    1、网站在不同浏览器下是否能够正常使用

    二、操作系统兼容测试(web/app)

    1、Windows 7/ Windows 8/ Windows 10
    2、mac

    三、手机兼容(APP)
    1、品牌
    2、系统(iOS10.x,11.x,12.x,13.x/Android5,6,7,8,9,10)
    3、型号
    4、屏幕尺寸
    5、分辨率

    问题:
    1、什么情况下需要做兼容性测试?
    (1)公司内部人员使用的网站,如后台管理系统/老板/财务使用的财务系统—不需要做兼容性测试
    (2)大量外部人员使用的网站----需要做兼容性测试
    (3)

    2、兼容性测试主要关注什么?
    注:使用两个浏览器同时操作检测
    (1)功能
    (2)UI

    3、主要测试哪些浏览器兼容?
    (1)市面上主流浏览器(使用电脑上有的浏览器版本就可以):谷歌,火狐,360,IE,qq浏览器,Safari

    4、页面尺寸和分辨率是否要测?(是否要支持iPad)
    (1)对于严格要求页面等比缩小的网站是需要测的,一般不测页面尺寸

    展开全文
  • web移动端兼容

    2017-06-01 22:02:00
    移动端总结和手机兼容问题 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no...
  • H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-...(部分安卓手机的UC浏览器写完以后还是可以放大缩小) 忽略将页面中的数...
  • 我现在做的需求是实现人脸识别登录,使用h5编写页面,发现写好的js代码只可以在手机qq浏览器下运行,求大神指教怎么解决这个问题? 下面附上js代码: var aVideo=document.getElementById('video'); var aCanvas=...
  • * - ***ortchange*** : 当转屏的时候触发,兼容uc和其他不支持orientationchange的设备,利用css media query实现,解决了转屏延时及orientation事件的兼容性问题 * $(window).on('ortchange', function () { //当...
  • HTML5兼容手机

    2020-03-11 22:27:45
    web网站如何实现兼容手机 一、总结 一句话总结:加上这句话即可:<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>。 1、移动设备上的三个viewport是哪三个,分别代表什么? ppk把...
  • 兼容性超好的三个HTML视频播放器代码,vediojs,hlsplayer;flowplayer,亲测能用,兼容绝大多数手机浏览器,其中vediojs,hlsplayer;兼容性比flowplayer更好
  • 手机Web开发做浏览器兼容用到了

    千次阅读 2012-08-03 20:37:07
    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body...
  • 移动互联网时代的到来,WEB程序应该可以兼容手机及平板电脑浏览器 移动设备浏览器的问题是对HTML,CSS,JS的支持可能不全..特别是CSS支持度比较差 为了提高兼容性,以下是我的总结 以下是我总结的 1.一些控件,组件...
  • 1 为什么要有兼容性测试:比web浏览器还恐怖的手机浏览器 对于web网站,一般来说,目前我们需要兼容的是 1个操作系统(windows)X 3种浏览器(ie 6、ie7、firefox)= 3种情况 要求高一点的...
  • 话不多说我们直接贴代码,首先我们针对我们的安卓手机进行定位,安卓手机我们直接可以调用html5的定位,但是如果要想定位准确我们需要用百度地图进行经纬度转换 1,html5定位 var options={ enableHighAccuracy:...
  • 对于web网站,一般来说,目前我们需要兼容的是 1个 操作系统(windows)X 3种浏览器(ie 6、ie7、firefox)= 3种情况 要求高一点的web网站需要兼容的是 1个 操作系统(windows)X 7种浏览器(ie6、ie7、fire...
  • 在微信上面做了一个网页,里面用了一个video标签,测试了几台机子都没有问题,但是我们老板plus手机上出现了一个兼容性问题,就是上面的播放三角按钮不在中间,这个问题有没有人遇到过应该怎么解决
  • 可以说基本上能解决常见的浏览器兼容问题。 不信你可以拿尺子量一下。 如果某款手机不支持mm。 肯定是那款手机有问题。 下面的代码我没试过。 感觉应该可以。 @ media screen and (max-width: 75 mm) /*...
  • 兼容MySQ L的 Amazon Aurora平台介绍 S UM M IT 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 1 愿景: Amazon Relational Database Service 提供新的开源与商业数据库选项 云原生引擎 ...
  • 移动Web开发的兼容问题主要可以从以下几个层面来理解: - 设备差异导致的兼容问题。 - 操作系统差异导致的兼容问题。 - 浏览器差异导致的兼容问题。 这三种差异,依次是设备 < 操作系统 < 浏览器...
  • canvas画chart统计图手机兼容web端能看,手机真机不兼容怎么办?

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,069
精华内容 427
关键字:

web兼容手机