h5页面

移动端屏幕的几个概念 1、什么是dpr？ dpr: device pixel ratio 设置像素比 —— dpr=物理像素/设备独立像素。 设置独立像素：密度无关像素，个人理解：设备的实际屏幕大小 物理像素：设备像素，显示设备中一个最微小的部件，个人理解：针对iphone retina屏幕，2倍的即屏幕用2px点来显示css为1px的内容，3倍的同理 2、获取设备dpr值 js获取方式： window.devicePixelRatio Css获取方式： -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio （通过这个三个进行媒体查询，可对不同的dpr设置做一些样式适配，如对1px边框的处理问题上） 3、rem单位 rem: fontsize of root element 即相对于根标签 html的大小。例如当设置了html的font-size时为12px时，其他元素设置1rem则代表12px。 屏幕适配的方案 1、简单版 屏幕适配（windowWidth/设计稿宽*100） ——*100为了方便计算。即font-size值是手机deviceWidth与设计稿比值的100倍 document .getElementsByTagName( 'html' )

一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？ 移动端H5解惑-概念术语（一） 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。 而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。 2.2 移动端为什么要做适配 在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。 另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。 一致是什么意思？就是下面提到的几个主要解决的问题。 三、页面适配主要解决的问题 元素自适应问题 文字rem问题

随着移动浪潮的兴起，各种APP层出不穷，极速的业务扩展提升了团队对开发效率的要求，这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了，而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式：Hybrid APP。 作为一种混合开发的模式，Hybrid APP底层依赖于Native提供的容器（UIWebview），上层使用Html&Css&JS做业务开发，底层透明化、上层多多样化，这种场景非常有利于前端介入，非常适合业务快速迭代，于是Hybrid火啦。 本来我觉得这种开发模式既然大家都知道了，那么Hybrid就没有什么探讨的价值了，但令我诧异的是依旧有很多人对Hybrid这种模式感到陌生，这种情况在二线城市很常见，所以我这里尝试从另一个方面向各位介绍Hybrid，期望对各位正确的技术选型有所帮助。 Hybrid发家史 最初携程的应用全部是Native的，H5站点只占其流量很小的一部分，当时Native有200人红红火火，而H5开仅有5人左右在打酱油，后面无线团队来了一个执行力十分强的服务器端出身的leader，他为了了解前端开发，居然亲手使用jQuery Mobile开发了第一版程序，虽然很快方案便被推翻，但是H5团队开始发力，在短时间内已经赶上了Native的业务进度： 突然有一天andriod同事跑过来告诉我们andriod中有一个方法最大树限制

Springmvc.xml 添加 <mvc:default-servlet-handler /> <!--扫描包 --> <context:component-scanbase-package="com.cn.controller"/> <!--注解驱动 --> <mvc:annotation-driven/> <!--视图解析器 --> <beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"> <propertyname="prefix"value="/WEB-INF/html/"></property> <propertyname="suffix"value=".html"></property> </bean> <!--配置静态资源处理器 --> <mvc:resourceslocation="/js/"mapping="/js/**"/> <mvc:resourceslocation="/css/"mapping="/css/**"/> <mvc:resourceslocation="/imges/"mapping="/imges/**"/> <!--处理静态资源被 '/'拦截 --> <mvc:default-servlet-handler /> 页面放到对应的路径下

依据页面的结构，简化冗余代码，H5新增了一些语义化标签 header <header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。 nav <nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。 article <article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。 section <section>作为Html文档独立的功能。 aside <aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。 footer <footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。 address <address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。 注意！！！ 在不支持Html5的浏览器中

本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（ 手淘 ， 美柚 ）。这些app中都嵌者数以百计，千计的h5网页。 背后他们开发这些h5的框架是怎么样的呢？ 或许你也想开发一些h5，或者简单的react，vue应用，做些广告，做些互动和营销，发布到微信朋友圈传播， 那如何快速的搭建和发布这些h5呢？ 或许你是前端工作不久的初学者，搭建这样的多页h5网站， 怎么样的架构才是正确的打开方式呢？ 或许你想学习下充斥耳边的 webpack,vue,nodejs,es6,MERN框架的另类玩法 ，那这篇文章也适合你！ 最重要的是，你烦透了 移动端适配，移动端性能优化 ，你只想专注于功能开发，那这篇文章就是为你而准备的！ 如果让你现在从零开始搭建工程开发一个h5页面并且发布到线上，需要多久？ 滴答滴答滴答！～ 你可能需要做以下这些事件?？ 搭建服务端工程，分好目录结构，配置要数据库mysql，mongodb，redis; 搭建前端工程，划分目录结构 前端，服务端划分dev，test，prod环境 前端配置webpack做编译，多个h5是多页面的，可能你还要倒腾下webpack多页面的配置方案 好了，可以开始开发了，mobile h5还有适配问题

版权声明：本文由况鹰原创文章，转载请注明出处: 文章原文链接： https://www.qcloud.com/community/article/141 来源：腾云阁 https://www.qcloud.com/community 目前移动端越多越多的网页开始H5化，一方面可以减少安装包体积，另一方面也方便运营。但是相对于原生界面而言，H5的慢速问题一定被大家所诟病，针对这个问题，目前手Q存在几种方案，最常见的便是离线包方案，但离线包存在几个问题： 滞后性，内容显示不及时； 覆盖率，很难达到100%； 校验耗时，由于离线包的素材较多，加载时安全性校验非常多； 除了上面的缺陷外，对于一些UGC架构的业务，离线包的支持也不是特别好。针对这些问题，业界存在一种基于TCP长连接的新方案（WebSo），专注于提高首屏的加载速度。WebSo的思路来源主要是由于android端在初始化webview和http拉取资源串行执行时都很耗时，如下图： WebSo基于这一前提，把串行变并行，并利用tcp长连接替换掉http，另外一个突破是针对html内容的动态性，增加了模板和数据分离，变化频率较多的数据定义为data，变化频率较少的定义为template，基本实现流程如下图： 手机QQ针对个别页面最开始采用的也是WebSo这种方案，不过在灰度过程中发现数据不理想，尤其是首次加载及模板变更时数据非常糟糕

h5页面在iOS上的问题解决 1、ios移动端 软键盘收起后，页面内容被顶上去，不下滑回原处 代码如下： $(function(){ $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); }); }) 原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度（例如：200），当输入框焦点失去后让scrollY回到0就好了。 但是有一个很严重的问题：如果页面上有按钮需要操作 ，例如，评论的输入框+发布按钮，输入完文字，点击“发布”，触发click事件的时候，会导致页面先触发blur事件，键盘回落，然后一切就结束了。。。。按钮点击没有起任何作用。 解决方案： 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发。 2、移动端 input,按钮等样式在安卓与ios上不同的解决方案 input,select,button{ 　　-webkit-appearance:none; 　　appearance:none; } 去掉 IOS默认样式即可 3、IOS上下拉动滚动条时卡顿、慢 body { -webkit

HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search 使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。 HTML5 <video> HTML5 <audio> 使用 HTML5 你可以简单的绘制图形: 使用 <canvas> 元素。 使用内联 SVG 。 使用 CSS3 2D 转换 、 CSS3 3D 转换 。 使用 HTML5 你可以简单地开发应用 本地数据存储 访问本地文件 本地 SQL 数据 缓存引用 Javascript 工作者 XHTMLHttpRequest 2 HTML5 1.<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单: <!DOCTYPE html> 2.最简单的H5文档 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html> 3.语义元素 HTML5

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // window.webkit.messagehandlers是js的固定写法,只有写了这些 才可以和iOS原生或者安卓的进行交互, // 那个"authenticationCenter"是和客户端约定好的字段,客户端按照js和WKWeb的交互博客教的照着写就行 window.webkit.messageHandlers.authenticationCenter.postMessage(null); } else if (/(Android)/i.test(navigator.userAgent)) { WebViewController.authenticationCenter(); } if语句中判断为ios还是Android 红色部分为app中的方法 此处ios需将authenticationCenter方法名和ios端保持一致即可 Android 需将WebViewController.authenticationCenter();给予 来源： https://www.cnblogs.com/xiaoxiao2017/p/11905261.html