整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

手机网站注意事项和总结



、 安卓浏览器看背景图片,有些设备会模糊。

用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?

经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2。现在android比较乱,有1.5的,有2的也有3的。

想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了。

代码可以如下:

    background:url(../images/icon/all.png) no-repeat center center;   -webkit-background-size:50px 50px;   background-size: 50px 50px;display:inline-block; width:100%; height:50px;   

或者指定 background-size:contain;都可以,大家试试!

2、图片加载

若您遇到图片加载很慢的问题,对这种情况,手机开发一般用canvas方法加载:

具体的canvas API 参见:http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面举例说明一个canvas的例子:

<li><canvas></canvas></li>  

s动态加载图片和li 总共举例17张图片!

var total=17;  var zWin=$(window);  var render=function(){  
   var padding=2;  
   var winWidth=zWin.width();  
   var picWidth=Math.floor((winWidth-padding*3)/4);  
   var tmpl ='''''''';  
   for (var i=1;i<=totla;i++){  
    var p=padding;  
    var imgSrc=''''img/''''+i+''''.jpg'''';  
    if(i%4==1){  
      p=0;  
    }  
    tmpl +=''''<li style="width:''''+picWidth+''''px;height:''''+picWidth+''''px;padding-left:''''+p+''''px;padding-top:''''+padding+''''px;"><canvas id="cvs_''''+i+''''"></canvas></li>'''';  
    var imageObj = new Image();  
    imageObj.index = i;  
    imageObj.onload = function(){  
       var cvs =$(''''#cvs_''''+this.index)[0].getContext(''''2d'''');  
       cvs.width = this.width;  
       cvs.height=this.height;  
       cvs.drawImage(this,0,0);  
    }  
    imageObj.src=imgSrc;  
   }  }  render(); 

3、假如手机网站不用兼容IE浏览器,一般我们会使用zeptojs。zeptojs内置Touch events方法,具体可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API,已经支持IE10以上浏览器,对zeptojs可以选择使用!

4、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport

还有就是,有些手机网站我们看到如下声明:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。

使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

<meta name="viewport" content="user-scalable=0" />

但是为了更好的兼容,我们会使用完整的viewport设置。

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

当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。

5、apple-mobile-web-app-capable

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

语法:

<meta name="apple-mobile-web-app-capable" content="yes">

说明:

如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

兼容性:

iOS 2.1 +

6、format-detection

format-detection 启动或禁用自动识别页面中的电话号码。

语法:

<meta name="format-detection" content="telephone=no">

说明:

默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

兼容性

iOS 1.0 +

7、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。

如下:

 <a href="tel:4008106999,1034">400-810-6999 转 1034</a>

拨打手机直接如下

 <a href="tel:15677776767">点击拨打15677776767</a>

8、html5GPS定位功能

具体请看:http://www.sj520.cn/listdetail/1/8227/2290.html(HTML5中GPS定位之getCurrentPosition)

9、上下拉动滚动条时卡顿、慢

 body {     -webkit-overflow-scrolling: touch;     overflow-scrolling: touch; }

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

10、禁止复制、选中文本

Element {     -webkit-user-select: none;     -moz-user-select: none;     -khtml-user-select: none;      user-select: none; }

解决移动设备可选中页面文本(视产品需要而定)

11、长时间按住页面出现闪退

element {     -webkit-touch-callout: none; }

12、iphone及ipad下输入框默认内阴影(iPhone尺寸)

Element{     -webkit-appearance: none; }

13、ios和android下触摸元素时出现半透明灰色遮罩

Element {     -webkit-tap-highlight-color:rgba(255,255,255,0) }

设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。

后面一篇文章有详细介绍,手机网站点击链接触发颜色块的问题解决:地址:http://www.sj520.cn/listdetail/1/8227/2291.html

14、active兼容处理 即 伪类 :active 失效

方法一:body添加ontouchstart

<body ontouchstart="">

方法二:js给 document 绑定 touchstart 或 touchend 事件

<style> a {   color: #000; } a:active {   color: #fff; } </style> <a herf=foo >bar</a> <script>   document.addEventListener(''''touchstart'''',function(){},false); </script>

15、动画定义3D启用硬件加速

Element {     -webkit-transform:translate3d(0, 0, 0)     transform: translate3d(0, 0, 0); }

注意:3D变形会消耗更多的内存与功耗

16、Retina屏的1px边框

Element{     border-width: thin; }

17、webkit mask 兼容处理

某些低端手机不支持css3 mask,可以选择性的降级处理。

比如可以使用js判断来引用不同class:

if( ''''WebkitMask'''' in document.documentElement.style){     alert(''''支持mask''''); } else {     alert(''''不支持mask''''); }

18、旋转屏幕时,字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {     -webkit-text-size-adjust:100%; }

19、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现:保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /

-webkit-backface-visibility:hidden;

20、圆角bug

某些Android手机圆角失效

background-clip: padding-box;

21、顶部状态栏背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明:

除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。

如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。

兼容性 iOS 2.1 +

22、设置缓存

<meta http-equiv="Cache-Control" content="no-cache" />

手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

23、桌面图标

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。

上面的写法可能大家会觉得会有默认光泽,下面这种设置方法可以去掉光泽效果,还原设计图的效果!

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />

图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px)

24、启动画面

<link rel="apple-touch-startup-image" href="start.png"/>

iOS下页面启动加载时显示的画面图片,避免加载时的白屏。

可以通过madia来指定不同的大小:

<!--iPhone--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> <!-- iPhone Retina --> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPhone 5 --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> <!-- iPad portrait --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> <!-- iPad landscape --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> <!-- iPad Retina portrait --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad Retina landscape --> <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

25、浏览器私有及其它meta

以下属性在项目中没有应用过,可以写一个demo测试以下!

QQ浏览器私有

全屏模式

<meta name="x5-fullscreen" content="true">

强制竖屏

<meta name="x5-orientation" content="portrait">

强制横屏

<meta name="x5-orientation" content="landscape">

应用模式

<meta name="x5-page-mode" content="app">

UC浏览器私有

全屏模式

<meta name="full-screen" content="yes">

强制竖屏

<meta name="screen-orientation" content="portrait">

强制横屏

<meta name="screen-orientation" content="landscape">

应用模式

<meta name="browsermode" content="application">

其它

针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

<meta name="HandheldFriendly" content="true">

微软的老式浏览器

<meta name="MobileOptimized" content="320">

windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">

26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好

问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!

解决办法:

可以用html5的oninput事件去代替keyup

<input type="text" id="testInput"> <script type="text/javascript">     document.getElementById(''''testInput'''').addEventListener(''''input'''', function(e){         var value = e.target.value;     }); </script>

然后就达到类似keyup的效果!

者 | Slava Vaniukov

译者 | 苏本如,责编 | 夕颜

封图 | CSDN下载自视觉中国

出品 | CSDN(ID:CSDNnews)

随着软件开发向移动应用的转变,越来越多的企业意识到,移动应用程序对于企业和客户之间建立牢固的联系至关重要。这就是为什么安卓应用程序开发正在为不同的行业带来新的转机的原因。

根据Statista数据统计,截至2019年第四季度,谷歌应用商店(Google Play Store)上大约有257万个安卓应用程序,而且这个数字一直在增长。从现在起,许多规模不等的公司都将移动应用程序纳入其营销战略。

因此,在这样的竞争环境下,开发可靠的应用程序成为一项极具挑战性的任务。而能够给开发者带来帮助的是安卓应用程序开发框架,它可以加速和优化整个开发过程。

然而,为安卓应用程序开发挑选一个合适的框架并非易事。它取决于你要开发什么类型的应用程序,以及你的项目可能有哪些特别的需求。

为了帮助你解决这个问题,笔者在这里提供了一个我们认为是最好的安卓应用程序开发框架的列表,并且对其作了全面概述和比较。

原生安卓应用程序开发框架

原生安卓应用程序开发是最受欢迎的。原生应用程序通常是用Kotlin、Java或C++创建的。在创建一个具有流畅用户体验的自定义设计方面,它为你提供了最大的灵活性。借助它,你可以利用设备的硬件功能,包括麦克风、摄像头和传感器。这可以通过直接访问平台组件来实现。

原生开发工具包

原生开发工具包,或者叫NDK,被认为是最好的安卓框架之一。它使得开发人员可以使用C和C++来为安卓设备编写代码。它很少用于整个项目。开发人员在必须处理应用程序中的性能问题时经常使用它。

由于NDK旨在优化应用程序的性能,因此它附带了很多用C和C++编写的代码库。开发人员可以在构建新应用程序时使用这些功能。

你可以在Android Studio中使用NDK将C/C++代码编译成原生库。借助Gradle,你也可以把它打包到APK中。

IntelliJ- Kotlin

Kotlin由JetBrains创建,是最重要的静态类型编程框架之一。安卓开发人员经常将其用于应用程序开发。它同时具备函数式编程和面向对象编程的特点。

谷歌在2017年表示,Kotlin可以用作安卓开发的官方IDE(集成开发环境)。Kotlin运行在Java虚拟机上。因此,它完全可以与Java语言进行互操作。在许多情况下,它可以用作Java的替代品,因为它极大地统一了开发过程。许多开发人员已经转向使用Kotlin,并将它作为他们最喜欢使用的安卓主要框架之一。

使用Kotlin开发的应用程序,因为使用了字节码结构而运行迅速。

此外,如果你还没有尝试使用Intellij-Kotlin,你应该考虑一下。在最近的Stack Overflow开发者调查报告中,Kotlin被评为第四大最受欢迎的编程语言。

到2020年,许多大型企业都计划迁移或正在迁移到Kotlin。其中包括Uber、Trello、Pinterest、Twitter、Basecamp、Airbnb和Netflix,他们更喜欢Kotlin作为其开发安卓应用程序的主要语言。自发布以来,Kotlin已经证明了它是一个高度直观的安卓应用程序开发平台。

Sencha Touch

Sencha Touch是安卓应用程序开发框架之一,专为创建原生移动应用程序而设计。它基于HTML5和JavaScript,可用于原生安卓应用程序的开发。

图片来源:Sencha

Sencha Touch带有将近50个内置UI组件和原生主题。这使开发人员能够创建引人注目且外观精美的应用程序。该框架使用硬件加速方法,因此在其帮助下创建的应用程序可以在较高的级别上执行。

大型公司之所以选择Sencha Touch,是因为它具有高级别的兼容性和灵活性,以及快速的执行时间和响应能力。使用它构建的应用程序具有丰富的动画效果、流畅的滚动和高度自适应性。它庞大的数据包、大量的主题集、丰富的用户界面和集成的MVC系统,使其成为安卓开发的领先框架之一。

jQuery Mobile

jQuery Mobile框架是另一个可以帮助你构建可靠的安卓应用程序的框架。它是一个基于HTML5的UI框架。能够让你构建一个单独的、特别标记的、响应式应用程序或站点。它几乎适用于所有平板电脑,手机和移动工作台。

为了简化对主题的特殊修改,jQuery mobile创建了ThemeRoller。使用它,你可以轻松移动和下载自定义主题。为了获得更清晰的视觉效果,可以将其与CSS3属性(如box shadow和content shadow)一起使用。

安卓游戏开发框架

Unity

Unity被认为是用于多平台二维、三维、虚拟现实、增强现实游戏和人工智能驱动的应用程序的最佳安卓架构框架,因此广受欢迎。此外,根据Statista的研究数据,Unity被视为针对包括但不限于英国市面上的安卓游戏设备进行游戏开发的顶级引擎。

Unity提供免费版本和专业版本,供开发人员选择使用。

你可以轻松地在C#和UnityScript中使用Unity,UnityScript语言让人联想到JavaScript。它是一个跨平台的框架,允许开发人员将其游戏扩展到多个平台,例如PlayStation、iOS、Web、Windows、Xbox等。

这个框架的优点是可以使用的代码库和工具种类繁多,灵活性高而且创建速度快。像许多软件开发工具一样,Unity有一个内置的编辑器,允许你通过“Animator”窗口更改图像并管理动画。除此之外,该框架还提供了市场上最好的图形性能指标。

事实上,截至2018年,半数的最新手机游戏和超过60%的AR/VR体验内容都是使用Unity创建的。它是一个易于使用的平台,允许开发人员创建令人惊叹的内容和强大的用户连接。

Corona SDK

Corona SDK于2009年开发,是用于构建具有即时体验的快速游戏和应用程序

的完美软件开发套件。它基于Lua(一种开源的轻量级编程语言)。正因为如此,它的开发速度比大多数其他安卓应用程序框架快10倍。

图片来源:Coronalabs

Corona是一个跨平台的框架,但是在游戏开发人员中非常流行。它是完全免费的,可用于Windows和Mac OS X,并支持实时测试。该框架运行原生UI,并带有500多个API,以及一个直观的面向开发人员的广告平台。

它的API套件具有很多功能,包括网络,图形,小部件,粒子效果等等。安卓应用程序开发人员喜欢使用Corona框架,因为它对初学者友好且易于使用。

跨平台/混合安卓框架

React Native

React Native是一个著名的开源框架,为其他开发工具及其集成开发环境(IDE)提供平台支持。

So

图片来源:Reach Native

它基于React框架,一个JS库,现在越来越受欢迎。像特斯拉、Instagram、沃尔玛和Airbnb这样的公司已经使用这一技术来开发他们的原生移动应用程序。如果你要开发Web和移动版本,它通常用于构建单页应用程序。

除此之外,该框架是开发MVP和原生移动应用程序的热门选择。

该框架提供了一组核心的平台原生组件,包括View,Text和Image,它们直接链接到平台的原生UI构建块。

由于大多数React Native API的跨平台支持,开发人员可以编写一次代码,然后在任何地方运行它。这样就提高了开发速度并降低了开发成本。

该框架提供了一个热重载选项,开发人员可以在保持当前应用程序状态的同时,链接更新的文件。React Native编程社区的发展速度远远快于最初启动时的预期。

Xamarin

基于Microsoft Xamarin创建的是另一种更加流行的安卓开发框架。它提供了一个高级工具集,开发人员可以通过共享的C#代码库为多个移动平台构建原生应用程序。

图片来源:Xamarin

借助微软的云测试功能,使用Xamarin构建的应用程序可以在许多设备上进行测试。此外,它的代码共享功能使它成为最受欢迎的工具,因为它减少了编码时间并减少了开发人员必须处理的bug数量。

最近,Visual Studio IDE为Xamarin开发了工具。这样,你就可以获得开发工具包、云服务等。因此,医疗保健和能源等行业的许多主要参与者已经转向了它。它已经出现了一段时间,但是与其他安卓框架相比,使用它的开发人员的数量只是从最近开始增加了很多。

Appcelerator Titanium

Appcelerator Titanium是一个安卓平台,它也可以在iOS和Windows上使用。它使用一个拖放调色板,生成的代码具有出色的生产质量。它还具有双向更新功能,允许代码和设计之间的无缝移动。

图片来源:Appcelerator

它允许你跨操作系统和设备来执行UI更改,以及使用JavaScript直接访问每个iOS和Android API。它还包含无需更改的第三方原生库。

不过,它最出名的地方也许是创建复杂的自定义效果,比如动态动画。你可以在运行Titanium代码的同时,轻松地运行Swift,Java或Objective C代码。

Ionic

Ionic是经过麻省理工学院(MIT)认证的免费开源框架。它允许开发人员在JavaScript,HTML5和CSS3的帮助下构建渐进式的混合应用程序。由于其具有跨平台功能和集成AngularJS的能力,它已成为安卓开发中最受欢迎的框架之一。

它提供了一个CLI(命令行界面),其中包括日志记录,模拟器和实时重新加载等功能。由于它是基于Cordova和AngularJS发展出来的,因此它有一个庞大和繁荣的社区。

Flutter

Flutter由谷歌维护和开发,是一个多平台的移动应用SDK。它可以用于构建应用程序,但与其他安卓应用程序框架不同。它加速了跨平台开发过程,并使用Dart编写。Flutter被许多人认为是混合应用程序开发的最佳选择。

图片来源:Flutter.dev

它的框架使用二维渲染引擎Skia来创建视觉效果。类似于Material Design和Cupertino风格。它还是一个可靠的测试框架,允许开发人员执行单元测试、UI测试和功能测试。Flutter具有出色的热加载功能。这样就可以进行无缝测试,而无需重新启动应用程序。

Cordova

没有Cordova,前5名安卓测试框架的列表将是不完整的。Cordova是另一个免费的开源安卓框架。它允许开发人员通过单个代码库构建多平台应用程序。Cordova是一个混合框架,可以使用标准的web技术进行应用程序开发。它也可以与JavaScript,HTML5和CSS3完美配合。Cordova就像是移动应用程序和web应用程序之间的桥梁。

Cordova还可以访问原生设备API,这使得识别应用程序是否是使用原生语言进行开发非常困难。它最初旨在开发在线应用程序,但也能够为离线应用程序开发提供支持。这也使其成为开发桌面应用程序的理想平台。

PhoneGap

PhoneGap是一个开源的安卓应用程序框架,由Apache和Adobe支持。它允许软件工程师使用web开发技术构建应用程序,并与HTML5、CSS3和JavaScript协同工作。这是一个既适用于原生安卓和iOS应用程序,同时也适合web应用程序的框架。因其具有这样的多功能性,而对开发人员来说非常有用。

图片来源:PhoneGap

借助PhoneGap,开发人员可以跟踪应用程序开发过程中所做的任何更改。它通常用于开发混合移动应用程序。PhoneGap提供了一致的性能和工作自由,而不受硬件的特定限制。

你可以将其与安卓系统一起使用,但它也有助于为其他操作系统开发应用程序。该框架的最新版本随附内置的Cordova WebView,用于将PhoneGap代码集成到更复杂的原生应用程序中。它有一个扩展的集成插件库、第三方工具和一个快速增长的开发环境。

NativeScript

NativeScript是混合应用程序开发的另一个框架。它的优点是免费和开源。

它使得开发人员能够使用Angular、Vue和TypeScript创建应用程序。这个框架是由保加利亚软件公司Telerik设计的。从CocoPods到Gradle,开发人员都可以轻松地使用这个框架在他们的项目中直接重用各种插件。随着时间的推移,这将是越来越流行的安卓UI测试框架之一。

它还使得精通JavaScript,HTML,CSS和原生UI标记的web开发人员可以轻松地创建优秀的渐进式应用程序。如此多的开发人员选择NativeScript进行安卓应用开发的原因之一是:它可以提供原生平台UI,比如说,你可以获得类似原生应用的性能和用户界面。

通过在UI线程上运行JS,该框架可以在所有原生平台API上实现高性能。在所有适用于安卓的Java框架中,这可能是最适合你使用的框架。

结束语

综上所述,为应用程序开发选择合适的安卓框架可能是一个复杂的过程。对于一家公司和一个应用程序来说是行之有效的选择,对另一家公司和另一个应用程序来说则未必适用。重要的是,要考虑到你的特定应用和项目的需求,然后选择一个拥有你所需要的所有工具和功能的框架。祝你好运!

原文链接:

https://levelup.gitconnected.com/top-frameworks-for-android-app-development-overview-of-top-dc95fcde75a0

本文为CSDN翻译文章,转载请注明出处。

☞程序员为什么应该旗帜鲜明地反对“最佳实践”?

☞“软件开发教父” Martin Fowler 从业 40 年最想说这两个字!

☞红外光抗疫、成功预测新基建,投资 280 家企业的光学博士到底是谁?

☞前端机器学习:识别人脸,并在脸颊上画草莓

☞瑞幸咖啡自曝虚假交易 22 亿,App 反冲 TOP 1

☞在Kubernetes上部署一个简单的、类PaaS的平台,原来这么容易!

☞旷视提双边分支网络BBN:攻坚长尾分布的现实世界任务 | CVPR 2020 Oral

☞2020年,这20个大家都认识的加密交易所过得怎么样?

 首先可以肯定,html5(简称h5)将在很多年内成为互联网的主流。那到底什么是h5呢?想了解h5,先要了解它的前身html和被它终结的flash:

  2000年左右的前端静态网页格式是html的,仅支持ie,netscape等几大主流浏览器。简单地说,利用html中的table标签进行基本图文排版,用javascript脚本(简称js,后面会提到)提供比如跑马灯、打字效果、下拉菜单等简单动画效果。这些table、js代码(其实还有其他)就构成了html文档,传到服务器就能在互联网上浏览了。为了弥补js的粗陋动画效果,有个叫flash的精美动画格式挺身而出了。flash不仅能做动画,还能内嵌视频,那时候做flash的人叫闪客,是个很酷毙了的行业。更多网站建设和SEO案例【www.tpsem.com】

在flash动画大行其道的日子里,js动画效果简直连打酱油都算不上。于是将flash格式作为块结构插到html代码里做成网页,这种搭配持续了10几年。中途仅仅将html中的table标签变成了div+css 用来实现内容和样式的分离(这句看不懂就跳过吧,不是重点)。但html+flash的格局是动摇不了的:html用来网页排版,flash做酷炫效果、动画。且不说它两移动端几乎为0,光说pc端,这两种格式都有很大缺点:html效果很单调粗陋,flash无法让搜索引擎搜索,而且所有浏览器不能直接播放,要下载一个flashplayer的插件才行,最要命的是flash技术本身也是有问题的。作个不恰当的比喻,html+flash就像一个土的掉渣的实在人硬生生娶了一个花瓶式的惊艳美女。

  到了移动互联网时代来临的2014年,flash在移动端的失败基本上宣布它将退出历史舞台,因为没有人愿意采用手机端和所有苹果产品不支持的玩意,酷毙变成了苦逼……于是问题出来了:流媒体的空缺谁补?酷炫效果谁补?强大的动画效果谁补?总不能由于移动端的普及,反而连累整个电脑端的互联网的效果和动画一下回到解放前吧?

  好在html5的到来弥补了这一切,而且几乎所有浏览器宣布对它的支持,现在主流的ie10+、谷歌chrome、safari、opera、火狐以及各种国内浏览器等,各种手机浏览器都支持它的所有功能。不仅如此,h5的优势还体现在:

  1.对流媒体、视频的支持前所未有,甚至兼容到了手机版。

  2.现在的js脚本咸鱼翻身,动画效果极其强大!并有了支持矢量的canvas功能,弥补了flash退出后的效果缺失。

  3.h5的css3样式,支持响应式布局,完成了手机、电脑、pad端的无缝兼容(自适应各种屏幕和设备),而以前的html只支持电脑端

  4.支持各种微传播的轻app(类似不需要下载的手机端app,做宣传专题页很合适),这在html时代想都不敢想的。

  5.h5和手机app的数据兼容也是无障碍的,很容易通过h5打通各种交互界面、数据。这在html时代更是不敢想的。

  h5只有两个缺点:1.ie9以下的浏览器看不到一些酷炫效果,只能提供基本功能,这对兼容性提出了很高的要求。2.开发成本高得多。

  名字还叫html,和html的简单排版功能却有着天壤之别。这,就是马上,或者正在崛起的html5!

  html5=css3+javascript,它承载者打通各大浏览器、各种浏览设备、苹果与PC、安卓和windows及ios、app与轻app、微平台与各种平台的功能并完全兼容……写这种代码的人叫前端设计师,现在是炙手可热的行业。