HTML5

视频标签 video的一些特殊属性详解

HTML5标签video在PC上显示很简单,就一个标签加资源,很少需要关心其它属性。但放到移动设备上,video的标准,Android和iOS有很多区别,另外还有很多各家浏览器特定的属性,本文详细讲了video在移动端的实践。 原文:视频H5 video标签最佳实践 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。…

    

H5唤起APP指南(附开源唤端库)

前一段时间在做一些H5页面,需求中落地页占比较大,落地页承担的职责就是引流。引流有两种形式,同时也是我们对唤端的定义:引导已下载用户打开APP,引导未下载用户下载APP。

引导已下载用户打开APP,从数据上说用户停留在APP中的时间更多了,是在提高用户粘性;从体验上说,APP体验是要比H5好的。引导未下载用户下载APP,可以增加我们的用户量。

上面其实分别解释了 什么是唤端 以及 为什么要唤端,也就是 3W法则 中的 What 和 Why,那么接下来我们就要聊一聊 How 了,也就是 如何唤端

        

Web Components 是什么?它为什么对我们这么重要?

摘要

先看一看未来的 WebComponent 标准,再简单了解怎么写 WebComponents,最后说说它的重要性。

简介

这篇文章简单介绍 WebComponent 标准,介绍哪些浏览器已经开始支持 WebComponents,讨论 WebComponents 能解决什么问题,以及它对 web 开发的重要性。你可以了解到如何利用 Vanilla javascript 编写一个简单的 WebComponent,我还会针对它的潜在优势分享我自己的一些拙见。…

                

前端开发必配置:html5shiv.js和respond.min.js的作用说明!

一、做页面开发时我们基本都会需要解决的问题:

1、解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。

2、让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

    由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,故这两种问题还是需要解决的,

    

响应式图像正确设置方法

响应式图像正确设置方法,代码如下:

PC,平板,手机显示良好:

我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像,适应不同像素密度的屏幕。

通过 媒体查询,来为不同宽度的屏幕设置不同的图片。

其中,1x 2x 3x 代表设备像素比

通常 pc的设备像素比为1,iphone7为2,iphone7 plubs为3,一些手机为4,还有一些为1.5,3.65等非整数值。

在下面,所有的设备像素比都要用同一张图片,这样才能显示正常。…