精华内容
下载资源
问答
  • web qq 聊天 js 静态 手机 移动 pc 即时通 响应式,webQQ响应式兼容手机web和pcweb的聊天纯JS的静态页面和效果,可以配上websocket和后台交互
  • 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

    展开全文
  • 如何快速的做到手机端的页面兼容 为什么要写这篇文章 前段时间做了一个项目,客户要求最低兼容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就不会再变化。

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

    千次阅读 2018-09-29 00:06:32
    但是智能手机市场的丰富多彩,百花齐放,导致移动端的网页开发和传统的 PC 端网页开发有所不同。 很多人可能正迈向手机端网页开发,但又听说手机端网页开发有着这样或那样的,所以有些忐忑。 这里,博主用近年来开发...

    Web 开发比较头疼的问题之一就是处理浏览器的兼容性。

    • 首先,HTML、CSS 和 JS 都有不同的版本,各版本的语法不一样。
    • 其次,浏览器有多个厂家,每个厂家对于语言标准的支持也不一样。
    • 最后,浏览器也有不同的版本,每个版本的情况也不一样。

    以上这些原因就造成了同一份代码在不同浏览器上表现不一致,简而言之就是兼容性问题

    本文主要介绍当前一些常见的兼容性问题以及解决方案,由于博主从事移动端的网页开发,所以会重点介绍移动端的一些兼容性问题。

    浏览器介绍

    • 使用 Trident 内核的浏览器:IE、Maxthon、TT;
    • 使用 Gecko 内核的浏览器:Netcape6 及以上版本、FireFox;
    • 使用 Presto 内核的浏览器:Opera7 及以上版本;
    • 使用 Webkit 内核的浏览器:Safari、Chrome。

    不过我们这里谈论浏览器的兼容性,主要谈论主流浏览器,如 IE、FireFox 以及 Chrome,因为它们分别属于不同的浏览器内核,所以以它们为例进行讨论。

    有人看到这里可能要问,为什么没有 360 浏览器、QQ 浏览器或 UC 浏览器?事实是国内几乎所有浏览器都是使用的上述浏览器内核,只不过外面换了一层皮肤而已。

    兼容性说明

    对于浏览器的兼容问题,一般分三个方面:

    • HTML 兼容
    • CSS 兼容
    • JavaScript 兼容

    大多数我们遇到的兼容性难题是 CSS 某些属性浏览器不支持导致的,这里推荐一个网站 Can I use,可以帮我们检测某个 CSS 属性的浏览器兼容性情况。

    例如查看 flex 的兼容性:

    flexbox

    从网站上搜索的结果来看,IE 10 开始支持 flexbox 布局,但是需要在属性前面添加前缀 -ms-

    问题清单

    • 默认样式
    • 盒模型
    • PostCSS
    • Polyfill
    • <meta> 标签处理
    • 1px 边框问题
    • 300 毫秒点击延迟问题
    • 点透问题
    • 图片分辨率问题(@2x与@3x图)

    问题详情

    默认样式

    谈起浏览器兼容性,默认样式可以说是一个最常见的问题。

    问题描述

    我们可以随便写几个 HTML 标签,让后在不同的浏览器中打开,我们会发现它们的边距、边框、大小等都会有不同。

    解决方法

    一、简单粗暴

    /* 如果要解决默认边距问题,可以采用如下方法 */
    
    * {
      padding: 0;
      margin: 0;
    }
    

    这种方法有些问题,现在一般不推荐了。一方面 * 导致 CSS 渲染引擎在渲染 CSS 的时候,使用 * 遍历整个 DOM 树,影响性能渲染性能。另一方面 * 的威力太大,管你是谁,统统重置,把很多没有必要的都重置了。

    二、引入 reset.css

    最先作者是 Eric Meyer,目的是在各个浏览器达到统一的效果。

    官网:https://cssreset.com/scripts/eric-meyer-reset-css

    三、引入 normalize.css

    normalize.css 是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个 CSS 重置样式库,Bootstrap 用的就是它。

    很多人说 reset.css 太暴力了,normalize.css 相对要温柔一些。normalize.css 修复了不同浏览器常见的不一致,规范化常见的组件风格,保存有用的默认值。

    官网:https://github.com/necolas/normalize.css

    盒模型

    问题描述

    根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE6 中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和(不包过外边距)。

    解决方法

    CSS 提供了一个属性用来设置元素的盒模型类型。

    {
      box-sizing: content-box; /*设置标准盒模型*/
      box-sizing: border-box; /*IE 盒模型*/
    }
    

    其实很好记忆,content 就是内容嘛,说明 width 只是内容的宽度;border 就是边框,说明 width 包含内容、内边距以及边框。

    PostCSS

    -webkit--ms--moz-这些 CSS 属性前缀相信大家都不会太陌生,某些 CSS 属性,尤其是 CSS3 新增的一些属性,在各大浏览器早期的版本都不能直接支持,必须要加上这些属性前缀。

    如果我们写代码时,都手动去添加那岂不累死了。还好前端从不缺少工具,但凡能简化操作的东西,一些高手及爱好者都想到了解决方法,并且提供了开源工具。

    PostCSS 就是一个能帮助我们解决前缀问题的 js 工具。在 Webpack 中使用 Postcss,可以参考这里

    PostCSS 的特点

    • 增强代码的可读性:利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。
    • 将未来的 CSS 特性带到今天!
    • 终结全局 CSS:就是说你永远不用担心命名太大众化而造成冲突太普通,只要用最有意义的名字就行了。
    • 避免 CSS 代码中的错误。
    • 强大的网格系统:LostGrid 利用 calc() 和你所定义的分割方式来创建网格系统,无需传递大量参数。

    Polyfill

    Polyfill 是一个 js 库,主要抚平不同浏览器之间对 js 实现的差异。比如 html5 的 storage(session 和 local),不同浏览器,不同版本,有些支持,有些不支持。

    Polyfill 本质是一层包装,通过个浏览器所提供的特有接口来实现同一个功能。

    Polyfill 具体做法典型的是在 IE 浏览器中增加 window.XMLHttpRequest ,内部实现使用 ActiveXObject。

    在 GitHub 上,我们可以看到各种新特性的 Polyfill,如果我们用到哪个特性,但是它的支持不是太好,我们就可以从中挑选响应的 js 库来使用。

    meta 标签处理

    在 2014 年,W3C 就发布了 HTML5。现在手机端网页都是采用 HTML5 标准。当然,在一些 PC 网页,越来越多的人也采用了新的网页标准。

    在开始写手机端网页时,我们会在 HTML 中写上下面的代码:

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

    关于 viewport 的细节请参考:https://www.cnblogs.com/2050/p/3877280.html

    1px 边框问题

    所谓的 1px 边框问题就是在 dpr 大于 1 的屏幕上,我们在 CSS 声明的 border 为 1px 所呈现出来的效果不是我们希望的 1px。

    我们知道屏幕有许许多多的像素点组成,每一个像素点只可以呈现一种颜色,像素点就是颜色分配的最小单位。

    在这里插入图片描述
    图片来自:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

    观察上面这张图,不难发现,在同一物理尺寸大小下,我们可以划分出不同的数量的小方格。如果我们把其比为像素点,我们可以知道,在同一大小的手机屏幕上,由于工艺和材料的不同,我们可以得到不同数量像素点的屏。

    同一尺寸,像素点密度越大,那么它所呈现出来的颜色越丰富,看上去也就越清晰。苹果的 Retina 屏就是一种高清屏,屏幕密度比一般安卓手机要大(不过现在安卓手机屏幕的分辨率也变大了)。

    更多关于各种尺寸的单位请查看:https://blog.csdn.net/zhoulei1995/article/details/78671256

    因为 CSS 中的 px 是一个相对单位,所以在 dpr 为 1 的屏幕中,它会用 1 个像素点去渲染;但在 dpr 为 2 的屏幕中,它会用 4 个像素点去渲染。而我们实际上期望在所有的屏幕中,一边框都是一个像素点去渲染的。

    那么如何解决这个问题呢?

    博主使用的就是 @media 媒体查询 + 伪类 + transform: scale 这种方式来实现。

    border-1px($color) {
      position: relative
      &:after {
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '
      }
    }
    
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
      .border-1px {
        &::after {
          -webkit-transform: scaleY(0.7)
          transform: scaleY(0.7)
        }
      }
    }
    
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
      .border-1px {
        &::after {
          -webkit-transform: scaleY(0.5)
          transform: scaleY(0.5) 
        }
      }
    }
    

    更多 1px 解决方案:https://www.w3cplus.com/css/fix-1px-for-retina.html

    300 毫秒点击延迟问题

    在 PC 时代,我们用鼠标点击,即可触发一些动作。但是在智能手机时代,一切变得不同了。2007 年,首款 iPhone 发布前,工程师针对移动端大屏手机的体验做了一些优化。比如单击可以触发一个动作,双击可以触发另一个动作,如放大网页,这极大方便了用户。

    那么如果判断用户是单机还是双击呢?苹果工程师相处了一个方法,用户点击时会有一个 300 毫米的延迟,之后才会触发动作。这个 300 毫秒的间隙,如果用户又点击了一次,那么可以判断用户本次的操作为双击。

    可是随着移动互联网的发展,许多网页不需要双击操作,因为网页针对移动端的优化做的越来越好。如此以来,300 毫秒的设计反而在大多数场景成了一个问题。

    FastClick

    FastClick,FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

    在检测到 touchend 事件的时候,FastClick 会通过 DOM 自定义事件立即触发一个模拟 click 事件的 click 事件(自定义事件),并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

    更多细节参考:http://www.cnblogs.com/chaojidan/p/4517895.html

    点透问题

    这个问题造成的原因是:触摸事件和点击事件的时间不一致。

    js 事件执行顺序:触摸事件 > 点击事件。

    如 A 和 B 两个元素,且采用绝对定位,相互不包含,但是 A 在 B 的上面。假设 A 和 B 都绑定了触摸事件,那 A 元素事件触发后 A 元素隐藏,这个时候点击效果造成的触摸事件触发了,但是点击事件还没触发。

    本来应该作用到 A 元素上的,但是 A 元素隐藏了,就触发到 B 元素上了。所以看上去像发生了点透事件。

    图片分辨率问题(@2x与@3x图)

    为什么移动端我们有 @2x 与 @3x 图之分呢?

    这个还是因为手机屏幕问题,有的是普通屏,有的是高清屏,这就造成了相同尺寸的屏幕像素密度不同。

    这里我们需要认识一下尺寸和分辨率。

    • 尺寸:物理单位,一个绝对单位,如:米
    • 分辨率:相对单位,如:像素

    先说一下手机,如 iPhone 3GS 和 iPhone 4 都是 3.5 英寸,但是前者分辨率为 320 * 480,而后者的分辨率为 640 * 960。

    同样,同一尺寸的图片,其分辨率也可能不同。

    主要有两种情况会造成问题:

    1. 图片的分辨率大于屏幕分辨率
    2. 图片的分辨率小于屏幕分辨率

    第一种情况

    由于图片的像素数目屏幕物理像素的数目,这样一来即使使用全部的物理像素也无法完整显示这张图片,因此浏览器也会经过一定的算法,将图片进行压缩,使得压缩后图片的位图像素等于物理像素。

    会导致图片清晰度不会发生变化,但是会有一些色差及锐利度的减少。

    第二种情况

    用来显示图片的屏幕物理像素个数大于图片物理像素,那么屏幕多出的物理像素将采用填充的方法来显示图片。

    会造成图片模糊。


    更多细节参考:

    展开全文
  • 我现在做的需求是实现人脸识别登录,使用h5编写页面,发现写好的js代码只可以在手机qq浏览器下运行,求大神指教怎么解决这个问题? 下面附上js代码: var aVideo=document.getElementById('video'); var aCanvas=...
  • 手机Web开发做浏览器兼容用到了

    千次阅读 2012-08-03 20:37:07
    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body...
    alert($(window).height()); //浏览器当前窗口可视区域高度   
    alert($(document).height()); //浏览器当前窗口文档的高度   
    alert($(document.body).height());//浏览器当前窗口文档body的高度   
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin   
    alert($(window).width()); //浏览器当前窗口可视区域宽度   
    alert($(document).width());//浏览器当前窗口文档对象宽度   
    alert($(document.body).width());//浏览器当前窗口文档body的高度   
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin   
       
    // 获取页面的高度、宽度  
    function getPageSize() {  
        var xScroll, yScroll;  
        if (window.innerHeight && window.scrollMaxY) {  
            xScroll = window.innerWidth + window.scrollMaxX;  
            yScroll = window.innerHeight + window.scrollMaxY;  
        } else {  
            if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac      
                xScroll = document.body.scrollWidth;  
                yScroll = document.body.scrollHeight;  
            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari      
                xScroll = document.body.offsetWidth;  
                yScroll = document.body.offsetHeight;  
            }  
        }  
        var windowWidth, windowHeight;  
        if (self.innerHeight) { // all except Explorer      
            if (document.documentElement.clientWidth) {  
                windowWidth = document.documentElement.clientWidth;  
            } else {  
                windowWidth = self.innerWidth;  
            }  
            windowHeight = self.innerHeight;  
        } else {  
            if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode      
                windowWidth = document.documentElement.clientWidth;  
                windowHeight = document.documentElement.clientHeight;  
            } else {  
                if (document.body) { // other Explorers      
                    windowWidth = document.body.clientWidth;  
                    windowHeight = document.body.clientHeight;  
                }  
            }  
        }         
        // for small pages with total height less then height of the viewport      
        if (yScroll < windowHeight) {  
            pageHeight = windowHeight;  
        } else {  
            pageHeight = yScroll;  
        }      
        // for small pages with total width less then width of the viewport      
        if (xScroll < windowWidth) {  
            pageWidth = xScroll;  
        } else {  
            pageWidth = windowWidth;  
        }  
        arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);  
        return arrayPageSize;  
    }  
       
    // 滚动条  
    document.body.scrollTop;  
    $(document).scrollTop();  

    展开全文
  • 兼容性超好的三个HTML视频播放器代码,vediojs,hlsplayer;flowplayer,亲测能用,兼容绝大多数手机浏览器,其中vediojs,hlsplayer;兼容性比flowplayer更好
  • 1 为什么要有兼容性测试:比web浏览器还恐怖的手机浏览器 对于web网站,一般来说,目前我们需要兼容的是 1个操作系统(windows)X 3种浏览器(ie 6、ie7、firefox)= 3种情况 要求高一点的...
  • 移动互联网时代的到来,WEB程序应该可以兼容手机及平板电脑浏览器 移动设备浏览器的问题是对HTML,CSS,JS的支持可能不全..特别是CSS支持度比较差 为了提高兼容性,以下是我的总结 以下是我总结的 1.一些控件,组件...
  • 海康威视web插件【浏览器部分兼容& 全兼容

    万次阅读 热门讨论 2017-11-10 14:52:52
    项目中需要用到海康威视的web插件进行二次开发,但是在开发过程中遇到很多问题。这里整理几个比较典型的问题和解决方案。如果后续还有遇到会补充。 资料下载: ①:3.0开发包----->... ②:1.0.6版本webVideoCtrl....
  • 手机端、网页端签到日历,HTML/CSS/JS编写 适应性强 使用方便,亲测可用。
  • 话不多说我们直接贴代码,首先我们针对我们的安卓手机进行定位,安卓手机我们直接可以调用html5的定位,但是如果要想定位准确我们需要用百度地图进行经纬度转换 1,html5定位 var options={ enableHighAccuracy:...
  • html手机WEB纯静态页面 我这个是一个点餐系统的web 手机端静态页面,兼容主流的浏览器。
  • 在微信上面做了一个网页,里面用了一个video标签,测试了几台机子都没有问题,但是我们老板plus手机上出现了一个兼容性问题,就是上面的播放三角按钮不在中间,这个问题有没有人遇到过应该怎么解决
  • WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"></script> <!...
  • 支持web端及移动端(iOS 安卓 pad)语音合成
  • Web兼容性测试--浏览器/平台/分辨率

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

    2018-12-18 08:21:26
    简单实用的手机端网站焦点图滚动效果代码。兼容主流手机浏览器
  • 可以说基本上能解决常见的浏览器兼容问题。 不信你可以拿尺子量一下。 如果某款手机不支持mm。 肯定是那款手机有问题。 下面的代码我没试过。 感觉应该可以。 @ media screen and (max-width: 75 mm) /*...
  • 兼容所有浏览器的Web打印控件的设计方案   设计方案的简单实现网址:http://www.lc-simple.com/PrintTest/   第一章:Web打印控件的原理  Web打印控件的工作的原理如下: 在需要打印的客户端电脑(操作系统...
  • 关于web app 背景图片兼容问题

    千次阅读 2014-12-30 12:20:55
    前几天接到资本主义家的通知,命我在一个星期内搞一个订餐web app出来。 于是乎,为了使得 menu与page在一起使用的时候拥有更多空间,我运用了jQuery mobile框架的Panel responsive。然, 原menu demo是没有 icon 的...
  • 兼容MySQ L的 Amazon Aurora平台介绍 S UM M IT 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 1 愿景: Amazon Relational Database Service 提供新的开源与商业数据库选项 云原生引擎 ...
  • flutter-web问世之后,三端通用成为大趋势。理想很美好,但现实很骨干,采坑之路开始。。。 常用的几个命令: Flutter SDK下载 https://flutter.dev/docs/development/tools/sdk/releases?tab=windows#windows 检查...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,101
精华内容 24,440
关键字:

web兼容手机