H5方面（H5适配手机屏幕等）

一个html页，其文本包含三个方面的信息，逻辑，内容，样式。其中逻辑部分决定页面和用户交互的行为，样式部分决定用户界面的视觉表现，内容部分是结构化的文本信息。对于一个以内容为主的页面（区别于富交互应用/webapp）来说，在表现内容的html中，插入表现逻辑的js，显然不是最合理的做法，因为html的语义是进行文本内容和结构定义，这个层面的定义是和逻辑与视觉都无关的。完全可以以更小的耦合进行分解。

HTML/CSS/JAVASCRIPT的分离。
网页的布局方式：标准流(文档流/普通流)排版方式；浮动流排版方式；定位流排版方式；

布局：静态布局；弹性布局；自适应布局；流式布局；响应式布局。

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。

前端经典总结（一）- https://blog.csdn.net/wangyongjie2017/article/details/75733277

前端，web标准- http://www.divcss5.com/w3c/

移动端布局自适应的方法：flexible毫无疑问在移动端自适应上还是很方便的.

> 记事本编写Html的同鞋一定要注意
采用CSS定位属性实现Html中DIV层叠与悬浮- https://www.jb51.net/css/167026.html
<meta charste="utf-8"> 只是告诉浏览器要用utf-8来解释，而文档的编码，是在你保存时的选择决定的。如果保存ANSI
然后用utf-8解释，肯定是乱码。记事本的话，默认保存的文件格式是ANSI。所以在保存的时候要修改为uif-8。

> CSS/H5适配手机屏幕

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

iPhone X 适配手Q H5 页面通用解决方案- http://geek.csdn.net/news/detail/245119
开发适配手机屏幕的网页注意问题--http://blog.csdn.net/t000818/article/details/17007289
CSS3自适配手机屏幕[转]- http://www.cnblogs.com/tfanalysis/p/3713488.html
web page适配手机屏幕，web页面改适应手机-http://www.2cto.com/kf/201312/267283.html
开发的Webapp如何能够自适应手机屏幕的大小？-https://segmentfault.com/q/1010000003939855?_ea=431495
手机web自适应网页设计（html/css控制）-- http://mobile.51cto.com/ahot-409516.htm
解惑好文：移动端H5页面高清多屏适配方案-http://mdsa.51cto.com/art/201507/484215.htm
解惑好文：移动端H5页面高清多屏适配方案（2）-http://www.cnblogs.com/chenlf/p/5607453.html
【移动适配】移动Web怎么做屏幕适配（一）-- http://www.cnblogs.com/giveiris/p/5233585.html

1.使用Flexible实现手淘H5页面的终端适配（https://github.com/amfe/article/issues/17）
2.移动端高清、多屏适配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
3.A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）

> h5 UI布局，UI效果
web前端开发之几种布局方式之响应式布局- http://blog.csdn.net/gertyy/article/details/52764527
页面布局 - Layout- http://www.jianshu.com/p/903392e6ad50#
移动h5自适应布局- http://www.cnblogs.com/samwu/p/4285748.html
html5和css3项目案例- www.qietu.com
HTML5知识库：http://lib.csdn.net/base/html5 http://geek.csdn.net/news/detail/91536

html5下拉刷新和上拉加载更多- http://download.csdn.net/download/xiaoyu411502/8869533
H5列表- http://blog.csdn.net/fungleo/article/details/50905612

html5获取新闻列表查看详细内容- http://blog.csdn.net/qq_15950325/article/details/51512635

H5网页图片的动画效果- http://www.cnblogs.com/jone-chen/p/5333437.html
H5动态添加数据- http://www.cnblogs.com/laonniudajiangtang/p/5842857.html
mui H5 js动态添加不同类型的数据- http://www.cnblogs.com/lemon863376328/p/5120691.html
H5单页面手势滑屏切换原理- http://www.cnblogs.com/onepixel/p/5300445.html
https://github.com/git-onepixel/guesture
9款惊艳的HTML5/CSS3动画应用赏析- http://geek.csdn.net/news/detail/238820
让你大开眼界的9款HTML5动画特效- http://geek.csdn.net/news/detail/237245

7款精巧实用的HTML5/CSS3应用- http://geek.csdn.net/news/detail/237968

H5项目常见问题及注意事项- http://blog.csdn.net/u012377333/article/details/52326158
H5研究三：图文混排的实现- http://blog.csdn.net/xoxo_x/article/details/74020242

> H5离线缓存
-- H5 缓存机制浅析移动端 Web 加载性能优化- http://www.cocoachina.com/webapp/20151217/14718.html
- H5 应用程序缓存为应用带来三个优势：
离线浏览用户可在应用离线时使用它们
速度已缓存资源加载得更快
减少服务器负载浏览器将只从服务器下载更新过或更改过的资源。

- H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的:
浏览器缓存机制
Dom Storgage（Web Storage）存储机制
Web SQL Database 存储机制
Application Cache（AppCache）机制
Indexed Database （IndexedDB）
File System API

-- 浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。
另外有两种特殊的情况：
手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件。

完美的缓存机制应该是这样的：
缓存文件没更新，尽可能使用缓存，不用和服务器交互；
缓存文件有更新时，第一时间能使用到新的文件；
缓存的文件要保持完整性，不使用被修改过的缓存文件；
缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。
以X5为例，第1、2条不能同时满足，第3、4条都不能满足。

在实际应用中，为了解决 Cache-Control 缓存时长不好设置的问题，以及为了”消灭304“，Web前端采用的方式是：
在要缓存的资源文件名中加上版本号或文件 MD5值字串，如 common.d5d02a02.js，common.v1.js，同时设置 Cache-Control:max-age=31536000，也就是一年。在一年时间内，资源文件如果本地有缓存，就会使用缓存；也就不会有304的回包。

如果资源文件有修改，则更新文件内容，同时修改资源文件名，如 common.v2.js，html页面也会引用新的资源文件名。

-- H5缓存及H5如何写文件，然后跨原生App也能读取？？
HTML5之本地文件系统API - File System API- http://blog.csdn.net/salonzhou/article/details/28275713
使用HTML5 FileSystem API设计离线文件存储- http://www.cnblogs.com/mnight/archive/2013/04/24/3040641.html http://www.cnblogs.com/wzh2010/archive/2012/05/23/2514809.html

W3C github- https://github.com/w3c/

W3C issues - https://github.com/w3c/filesystem-api/issues

> H5事件冲突
touch事件的来源:
PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> click -> mouseup三步。
手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。
手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。有人在PC和手机上对事件做了对比实验，以说明手机对touch事件相应速度快于mouse事件。
移动端h5页面touch事件与点击穿透问题:而由于click事件的滞后性（300ms），在这300ms内上层元素隐藏或消失了，下层同样位置的DOM元素触发了click事件（如果是input框则会触发focus事件），看起来就像点击的target“穿透”到下层去了。

移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jquery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。

> H5模板
H5 meta viewport 你真的了解吗？- http://yunkus.com/meta-viewport-usage/
只有20行Javascript代码！手把手教你写一个页面模板引擎- http://blog.jobbole.com/56689/
一些网站后台模板源码分析- http://blog.csdn.net/bcbobo21cn/article/details/51271750
50余款手机 h5页面模版源码- http://download.csdn.net/detail/u011677560/9430850
HTML5页面强力推荐几十套H5手机页面模板源码- http://download.csdn.net/detail/jiangchunhui2009/9573205
移动端H5开发 Turn.js实现很棒的翻书效果 Turn.js的官方网址: http://www.turnjs.com/
HTML5 有哪些让你惊艳的 demo？- https://www.zhihu.com/question/24398907
基于html5+css3实现的精美聊天界面demo- http://download.csdn.net/detail/lupangdelu/8936779#comment
网页模板- http://www.ymjihe.com/html
一款简洁的html5个人博客模板- http://www.duanliang920.com/muban/blog/264.html
个人博客模板源码- http://www.yangqq.com/download/div/

-- h5离线缓存和本地存储
HTML5操作本地文件- http://hwaphon.site/?p=396
H5 缓存机制浅析移动端 Web 加载性能优化- http://www.cocoachina.com/webapp/20151217/14718.html
HTML 5 Web 存储与应用缓存- http://blog.csdn.net/bamboolsu/article/details/49885955
利用H5本地存储localStorage、sessionStorage- http://www.cnblogs.com/firstForEver/p/5301830.html
Web移动端使用localStorage缓存Js和css文件- http://blog.csdn.net/a497785609/article/details/48321405

-- H5的6种缓存机制：
1.浏览器缓存机制
2.Dom Storgage（Web Storage）存储机制
3.Web SQL Database 存储机制
4.Application Cache（AppCache）机制
5.Indexed Database （IndexedDB）
6.File System API

-- 另外有两种特殊的情况：
1.手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
2.强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件。

浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的：
1.缓存文件没更新，尽可能使用缓存，不用和服务器交互；
2.缓存文件有更新时，第一时间能使用到新的文件；
3.缓存的文件要保持完整性，不使用被修改过的缓存文件；
4.缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。

DOM Storage 分为 sessionStorage 和 localStorage。localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。而 localStorage 则持久存在，在页面关闭后也可以使用。
AppCache 的原理有两个关键点：manifest 属性和 manifest 文件。

-- WebView load js
Android WebView加载本地html并实现Java与JS交互- http://www.cnblogs.com/Joanna-Yan/p/4826990.html
webview javascript 注入方法- http://www.cnblogs.com/rayray/p/3680500.html

> H5,H5 SVG绘制线条与三角形？
1500套HTML5模版分享- http://blog.csdn.net/banketree/article/details/52766933
HTML5 UTF-8 中文乱码的解决方法- http://www.jb51.net/html5/117758.html
html5（ H5学习之旅）- http://blog.csdn.net/u010321471/article/category/5818661
html引入css文件和js文件方式- http://blog.csdn.net/wozaifeiyang0/article/details/6888371
最近测试html5页面，发现默认都允许用户缩放页面，或者在屏幕双击放大或缩小。即相当于这样设置
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />
如果要禁止此情形，修改相应参数即可。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

在html中include一个文件内容的几种方法- http://blog.csdn.net/vebasan/article/details/5207893
jquery鼠标放上去显示悬浮层即弹出定位的div层- http://www.jb51.net/article/49386.htm
鼠标悬停控制下拉框的显示和隐藏- http://blog.csdn.net/phantom521/article/details/41120985
a标签的属性，选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
-- H5页面的引用路径配置：
绝对路径： /项目名/fun_css/dropload.css
相对路径： ../fun_css/dropload.css

HTML中使用cookie保存登录账户- http://blog.csdn.net/su20145104009/article/details/52735292
html 页面之间跳转和传值- http://blog.csdn.net/caofeilong20941/article/details/9030521
关于多个html标签单击事件的实现细节- http://blog.csdn.net/zbw18297786698/article/details/51303723
JS控制HTML元素的显示和隐藏- http://www.cnblogs.com/unpolishedgem/p/3247098.html

> WebView中设置参数
// 修改UserAgent使得web端正确判断
String ua = webview.getSettings().getUserAgentString();
webview.getSettings().setUserAgentString(ua+"; HFWSH /"+appversion);
// 修改ua使得web端正确判断
String ua = webView.getSettings().getUserAgentString();
webView.getSettings().setUserAgentString(ua.replace("Android", "HFWSH_USER Android"));
WebSettings webSettings = webView.getSettings();
webSettings.setAppCacheEnabled(true);
webSettings.setBlockNetworkImage(false);
webSettings.setAllowFileAccess(true); // 设置允许访问文件数据
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDefaultTextEncodingName("utf-8"); // 设置编码
webSettings.setDatabaseEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setJavaScriptEnabled(true); // 支持js互调
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 允许js弹出窗口
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDomStorageEnabled(true);
//设置域名
webView.getSettings().setUserAgentString("domain");

H5方面（H5适配手机屏幕等）相关推荐

html自动适配手机屏幕,手机web——自适应网页设计（html/css控制）
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. viewport是网页默认的宽度和高度, ...
H5 + vue 监听手机屏幕旋转及判断横竖屏
mounted () {// 监听 resize 方法window.addEventListener("resize", this.renderResize, false) }, ...
通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
h5 手机屏幕适配—REM
一.rem.em和px之间的关系使用rem之前,先得弄清楚rem.em和px之间的关系,特别是每一个单位的使用跟代码块的继承之间的关系: 单位代码地址运行后截图说明 px https: ...
h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
h5实现网页内容跟随窗口大小移动_HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率？
一.问题汇总手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
开发H5时背景照片兼容不同手机屏幕处理的最佳实践
最近在重新做过去常做的翻页H5,关于背景图有些新的经验心得分享. 翻页H5的背景图通常是要求全屏的.这里就存在一个问题,目前市面上的手机屏幕比例非常的不统一,这导致在背景图上的处理相当要注意. 通常我 ...

H5方面（H5适配手机屏幕等）

H5方面（H5适配手机屏幕等）相关推荐

最新文章

热门文章