在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html> 使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 h
随着陀螺仪作为只能手机的标配,根据手机角度不同,让图片有点视差微动效果可以给用户一点惊喜,于是简单研究了一下 HTML5 下利用陀螺仪获取设备方向的 API。 ### 处理方向变化的事件 HTML5 中与手机方向变化有关的 API 有两个,一个是 deviceorientation 事件,一个是 devicemotion 事件。 今天这个根据手机动来动去产生微动效果的主要用到 deviceorientation 事件,这个事件主要是监听并接收设备方向变化信息。 而 devicemotion 事件
AppCan IDE基于Eclipse定制,支持跨平台、本地打包、模拟调试、真机同步等功能
Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。
引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样的网页是怎样改制作出来的呢?今天我们就来探讨一下这个问题 阅读读者具备基础 1、熟练的使用HTML和CSS 2、对HTML5和CSS3有一定的了解,这个不必深入 3、掌握JavaScript、jquery脚本语言 如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看,要不然可能会跟不上下面的学习了 HTML的特殊用法 首
自在园O设计Mix科技实验室,正在 搭建Mix技能树,前几期更新的技能有: 技能之AR技术入门 5个用法,关于Gif技能 技能之用iMovie制作预告片 今天更新设计师进军科技领域的又一技能H5。 ---- 作为新时期的设计师,不会制作H5 ,恐怕很难跟上时代的步伐了。 H5原本指的是html5的标准,后来逐渐特指用于营销、广告用途的页面形式。 关于H5,你需要掌握html标签、js语法、css样式。建议自学,网站http://www.w3school.com.cn/上有大量实例教程,我的经验是大概
上面这个 slide 资料讲的非常好,算是一个入门的介绍吧。带我们建立基本的移动 web 开发知识体系和常见问题的实践。包含以下几个方面:
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发。但从这两种开发
在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家。
前言 在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍 1. H5页面 H5即 HTML5,是最新的 Web 端开发语言版本,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现。所以 Web 的通用测试点和方法基本都可以适用于它。H5其实就是:移动端Web页面。 H5应用在很多地方,如APP的活动专题页面、新闻页面、微信公众号文章
HTML5学堂:移动端布局一直都是一个问题,各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。 通常移动端的布局方式 1、rem布局,通过动态设置根目录下的font-size达到元素大小“自适应”,通常和百分比布局一起使用 2、固定像素设固定视口宽度。 3、最费事的media query,根据设备视口宽度不同设置不同的样式,换句话说一个页面有多套样式。可以说是正宗的响应式布局。 常规的做法带来的苦恼 常规的这些做法总
前言 在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码
移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 :
最近接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。
Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以直播卖货系统页面播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
HTML 标签和属性 HTML标签大全 手机页面的一些有用的meta 前端 Meta 用法大汇总 标签语意化 选择合适的块级HTML标签流程图 Web标准(Standard) HTML Living Standard-WHATWG WHATWG维护的持续更新的HTML标准 W3C规范 W3C规范翻译 HTML5中文小组翻译的。附HTML5中文小组主页 CSS 基本概念 CSS 词汇表 注释,语句,规则集等等。 【转载】理解 CSS 属性值语法 看懂 CSS 规范的属性值定义。 选择器
移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现网易的lofter采用了固定像素进行制作。今天我们就来剖析一下这种方法。 2015.08.19 测试手记:在魅族4当中的内置浏览器进行测试时,无论是我们书写的页面还是网易的lofter页面,都出现了bug问题,主要bug现象如下:当手指滑过部分文字的时候,文字的大小会出问题。经过排查之后,发现,在网页中的a标签会出现这个问题。当鼠标移动到a标签上的时
HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现网易的lofter采用了固定像素进行制作。今天我们就来剖析一下这种方法。 2015.08.19 测试手记:在魅族4当中的内置浏览器进行测试时,无论是我们书写的页面还是网易的lofter页面,都出现了bug问题,主要bug现象如下:当手指滑过部分文字的时候,文字的大小会出问题。经过排查之后,发现,在网页中的a标签会出现这个问题。当鼠标移动到a标签上的时候(即便不点击),标签的字体和行高会失效。具体原
什么是微信小游戏? 看前几天的科技新闻,微信中的“跳一跳”小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,“跳一跳”游戏带火了整个微信小游戏开发圈。微信小游戏
这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。 META相关
准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶版(附源码示例)
功能:禁止所有搜索引擎索引本页面,禁止跟踪本页面上的链接。(如有特殊页面不希望被搜索到结果页,可使用)
首先讲了移动端和电脑端的一些不同,讲到了viewport的概念和相关的虚拟像素、媒体查询,借助媒体查询来实现横屏、竖屏的区别显示。
本文的目的是搜集当前主流的meta配置,方便开发者快速开发调试。在这里不会做各种meta的深入分析,只是简单的介绍,让大家知道有这个东西。
如同桌面端一样,在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下,单从这个角度看兼容工作相对于桌面的百花齐放舒服了不少。 数据就不罗列了,目前移动端国产浏览器的占有率上是UC 跟QQ 浏览器这对基佬,所以做前端肯定优先考虑这二货。下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性,都来自其开发者文档(UC开发者中心,左下一doc文档,QQ浏览器)。 UC 浏览器的部分私有Meta 属性 设置屏幕方向为横屏还是竖
学习了一下UIView的setNeedsDisplay和setNeedsLayout方法。首先两个方法都是异步执行的。而setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到UIGraphicsGetCurrentContext,就可以画画了。而setNeedsLayout会默认调用layoutSubViews,就可以处理子视图中的一些数据。 宗上所诉,setNeedsDisplay方便绘图,而layoutSubViews方便出来数据。 \
1)媒体查询 @media 是个好东西,至少对像我一样刚入行的小前端做响应式是个不错的选择。
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
install 事件回调中有两个方法: * event.waitUntil():传入一个 Promise 为参数,等到该 Promise 为 resolve 状态为止。 * self.skipWaiting():self 是当前 context 的 global 变量,执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。 * 安装后( installed ):Service Worker 已经完成了安装,并且等待其他的 Service Worker 线程被关闭。 * 激活( activating ):在这个状态下没有被其他的 Service Worker 控制的客户端,允许当前的 worker 完成安装,并且清除了其他的 worker 以及关联缓存的旧缓存资源,等待新的 Service Worker 线程被激活。
理解编写程序开发的功能文档是一件容易的事,毕竟市场上有用那么多的优秀的程序可以借鉴。但是想要把一些直播程序功能实现的的门槛很高。用代码实现功能是一个十分困难的任务。一套优秀的程序,需要极强的使用上便利性,还有优秀的UI交互逻辑,完善的功能和便于理解操作逻辑;简洁优美的界面设计......
1、Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? drawable- hdpi、drawable- mdpi、drawable-ldpi的区别: (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854) (2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480) (3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240
面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。
本文来自“小时光茶社(Tech Teahouse)”公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑,斩荆披棘,我们一步步提升了体验,做到了和app基本一致的体验。在摸索优化背后,我们也想把这些问题
在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖屏的情况.很显然,如果用户手机允许屏幕旋转,那么在横屏的情况下,页面就变得很恶心了.
1.在以往开发中,app调用相册一直没问题。最近开发ipad的时候,项目必须横屏,这时候调用相册的时候app就奔溃了
react-ui-mode-cc 是融合响应式设计的 React 版实现,基于 create-react-library[1]构建,使用 云开发 CloudBase Framework[2]部署到腾讯云静态网站托管。
如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,
作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑,斩荆披棘,我们一步步提升了体验,做到了和app基本一致的体验。在摸索优化背后,我们也想把这些问题和解决方法总结下来,让其他同学做到直播的时候可以自豪的说,这
数字>=1200变成黑色. 900<=数字 <=1200.变成黄色. 数字<=900就红色.
一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):
0x00 简介 近期看到了两种XSS攻击手法:一种是利用JSONP和serviceWorkers的持久性XSS,一种是移动设备中的XSS,学习后总结一下,同时也请高手多多指点。 0x01 基于JSONP和serviceWorkers的持久性XSS 对于Web攻击者来说,通常都渴望在未知用户浏览器具体类型的情况下,仍然能够顺利通过它来访问网站。甚至在浏览器被关闭,再次访问时要挂钩的回话也没有了的情况下,依旧可以访问网站,那该多好啊!实际上,这不仅是说说而已,如果联合利用未被过滤的JSONP路由、service
领取专属 10元无门槛券
手把手带您无忧上云