在HTML5标准添加的新元素中，用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。... HTML5布局学习 勤学苦练 与下面的代码是一致的： HTML5布局学习...一个页面上可以使用多个 header 和footer,也可以插入一些别的元素，比如div ul 等。...， 用来表示包含页面相关的主要内容，用于装载非 正文的主要内容，如广告栏，侧边栏等。... HTML5新元素 article 新元素
简单点来讲：移动设备上的viewport就是屏幕上能用来显示我们的网页的那一块区域。 viewport不局限于浏览器可视区域的大小，一般来讲要比浏览器的可视区域要大。...一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的...viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。...很显然viewport的宽度并不等于设备屏幕的宽度，滚动条和缩放页面也不是我们想要的效果。那么怎么办呢？改轮到meta标签收拾残局了。...因为在没有指定缩放值的情况下，移动设备会自动计算initial-scale的值保证 layout viewport 也就是页面宽度自动适配浏览器的可视宽度。
带着问题去看书学习啦~ HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版）【不推荐】，微信读书中找到的学习Web前端书籍，第11章开始啦，完结了！... 标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。...实现技术，主要是应用CSS中媒体查询的media关键字，当检测到移动设备时，根据设备的宽度，将不重要的列，设置为display:none。...滚动显示表格中的列 指采用滚动条的方式，滚动查看手机端看不到的信息列。...仍使用CSS媒体查询中的media关键字实现技术，检测屏幕的宽度，然后利用CSS技术，重新改造，让表格变成列表，CSS的神奇强大功能在这里得以体现。
{ font-size: 32px } } 3、移动端touch事件(区分webkit 和 winphone) 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 以下支持...例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 4、移动端click屏幕产生200-300 ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效...比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态...如果不希望开启此功能，我们可以通过input标签属性来关闭掉： 14、 禁止文本缩放 当移动设备横竖屏切换时，文本的大小会重新计算...（支持3D），而且还有回弹滚动的内置滚动条，官方地址： iDangero 17、 移动端禁止选中内容 如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none
但貌似只能在弹出层中显示，而没有下拉这种方式显示。 zebra-datepicker 可配置性很强。但貌似只能在弹出在右上方。。。...自定义滚动条 perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。...iscroll 在移动设备上用不错 表格组件 datatables 表格可交互（对内容进行排序，删除等） backgrid 各种功能，带分页，可编辑表格内容。很棒。...内容进行实时的编辑 summernote 在移动设备上用不错 HTML5播放器 jwplayer 被大量网站使用 html5media 简单的h5player，轻量级 jplayer 功能强太，...cycle2 普通的幻灯，竟然不支持垂直滚动。。。 jcarousel 普通的幻灯，不兼容IE6 reveal 3d滚动。做ppt相当不错 nodePPT 国人做的，做ppt也相当不错。
HTML方向 调用系统功能 使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。...，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。...可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。...* { -webkit-tap-highlight-color: transparent; } 禁止动画闪屏 在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top，那么在视觉上就无任何变化。
的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码（部分设备可能支持不是很好）； 2、HTML5标签的使用 在开始编写webapp...6、自适应布局模式 在编写CSS时，不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...7、学会使用webkit-box 上一条，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式
1、响应式布局 开发一个页面，在所有的设备上都能够完美展示。...当然，这只是建议，也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。...关于响应式设计的思考： 根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。...但注意：event.preventDefault（）会导致默认行为不发生，如scroll，导致页面不滚动！如果页面带有滚动条，就需要考虑更换解决方案。...移动web页面也是拥有这样的能力的，但滚动有几种情况需要考虑： body层滚动：（系统特殊化处理） 自带弹性滚动，overflow：hidden失效，GIF和定时器暂停。
HTML方向 调用系统功能 使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。...，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。...可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。...* { -webkit-tap-highlight-color: transparent; } 复制代码 禁止动画闪屏 在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top，那么在视觉上就无任何变化。
的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 2、HTML5标签的使用 在开始编写webapp时，哥建议前端工程师使用...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动 增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊
-webkit-overflow-scrolling: touch 解释：-webkit-overflow-scrolling属性用于控制元素在移动设备上是否使用滚动回弹效果，其中touch表示使用具有回弹效果的滚动...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条... 解释：Pragme用于定义页面缓存，其中no-cache表示不缓存页面点击此处查看详细介绍 31.... 解释：使得手持设备能正常的渲染移动端页面，使得不识别 viewport 的浏览器能正常渲染移动端页面，比如：黑莓
这个时候，我们既想无延时，又不想触发点透效果，而且有的时候，我们希望我们的网页不仅可以在移动端访问，在 PC 模式下也可以访问，但是 tap 事件只能在移动端使用，所以只能用 click 事件，但是 click...我们知道， touch 事件只能在移动端使用，这个我们无法改变，所以我们只能改变延时的问题，于是我们就引入了 "fastclick.js" 库文件，解决 click 的延时问题。...1、iScroll 以下为官方介绍： iScroll是一个高性能，资源占用少，无依赖，多平台的 javascript 滚动 插件。 它可以在桌面，移动设备和智能电视平台上工作。...它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。 iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。...即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说： 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
Weex是一个移动端的动态化框架，它允许开发者用轻巧的 HTML/JS/CSS 开发多个端的 NativeApp。...在2016年双11会场中，Weex覆盖了99.6%（1747/1754）的会场页面，页面的打开速度、滚动的流畅性都保证了较好的用户体验。...• 2015年，也称为动态化框架元年，从年初的NativeScript、ReactNative 到年底阿里的Weex，它们都使用HTML/JS/CSS写页面，渲染出Native UI，在开发效率和用户体验上吸收了...Native开发的诸多亮点中，流畅体验和系统调用是最多被提及的，然而，实际上是痛并快乐着。 • 流畅体验体现在页面滚动/动画的流畅性，背后是更好的内存管理和更接近原生的性能。...主会场启动， WiFi 主会场启动，4G 主会场启动，3G 无论WiFi、4G、3G下都能确保秒开（下载+首屏渲染<1s），即使在2G这种慢速网络下也能在4s内看到页面。
移动端开发中，有一个躲避不掉的HTML meta 声明 。...如果文档大于视口，则用户可以通过滚动来移动视口。 白话描述一下： ●计算机把图像渲染到显示器的过程中，会先把图像画在一个逻辑层的画布上，然后从这个画布中框选一部分，将其投影到显示层。...如果浏览器和针对 PC 制作的网页都不做任何处理，那么在窄屏设备上加载网页，我们看到的效果便是默认显示网页的左上角部分，然后通过水平和竖直方向的滚动来浏览网页的其他部分。...不过，该方案依然会有很多问题： ●对缩小版页面内细节内容的浏览，依然要依靠放大和滚动，体验不好； ●如果 为 PC 设计的 网页的 CSS 宽度描述大于 980px，那么在移动端展示时，初始页面依然会有滚动条...有了定制视口的能力，我们可以轻松的做到以下几点③： ●针对较宽(比如 2000px) PC 设计的页面，我们可以设置 viewport 宽度为 2000，以使得移动设备中初始渲染的页面效果刚好不出现滚动条
一、基础知识 1、屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。...真机调试必须保证移动设备同服务器间的网络是相通的。 三、视口 视口（viewport）是用来约束网站中最顶级块元素的，即它决定了的大小。...PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。...四、屏幕适配 经过分析我们得到，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置 来进行控制，并改变浏览器默认的layout...1、viewport 详解 viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下： 通过设置属性 content="" 实现，中间以逗号分隔
除了前面提到的交互菜单，移动版设计主要关注的是内容。在大屏上，可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备上，用户通常有更明确的目标。 移动版设计就是内容的设计。...因为要先实现移动版设计，所以更应该了解在更大的视口下网页长什么样，这样才能在一开始就写出合适的 HTML 结构。...https://codepen.io/cellinlab/pen/eYyLvvQ # 创建移动版的菜单 不管用什么语言写代码都是一个迭代过程，CSS也不例外。...千万不要让用户放大页面，才能点中一个小小的按钮或者链接。 # 给视口添加 meta 标签 视口的meta标签。这个 HTML 标签告诉移动设备，你已经特意将网页适配了小屏设备。...此外 content 属性还有第三个选项 user-scalable=no ，阻止用户在移动设备上用两个手指缩放。通常这个设置在实践中并不友好，不推荐使用。
一、背景 在当今这个移动设备发展越来越快，并且技术越来越成熟的时代，移动设备成了企业扩展业务不可或缺的重要领域之一，随之而来的是适应手机的网站层出不穷，在开发过程中，我们往往会遇到一个很尴尬的问题：...移动端网页在用户双击屏幕时会变大，导致整个页面的布局错误，非常 影响最终效果，下面介绍一种通过html的meta标签来阻止该现象发生的办法。...假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 ...user-scalable=no在移动设备浏览器上可以禁用其缩放（zooming）功能。 maximum-scale=1.0通常情况下与 user-scalable=no 一起使用。...这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。 三、总结 这样设置完成以后，我们就完成了阻止移动设备上双击导致网页放大以致网页布局错乱的问题，有木有很开心？
2.Meta标签 页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户通过点击或者缩放等操作对屏幕放大浏览。...7.快速回弹滚动 在ios上，如果存在局部滚动，就要加这个属性了！如果不加，滚动会很慢，看起来也会有一卡一卡的感觉。...这个细节是我在基于vue开发焦点图的时候遇到的，后来自己找不到方法，直接在sf上提问了，大家可以去参考下：移动端轮播图，上下滑动的时候不触发页面的滚动 ps：滑动我没有使用什么库，是我根据touchstart...大家可以参考下面的资源，这些我不展开说了！ 1.web移动前端有哪些优化方案？...2.web移动端页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化：图片优化 16.小结 我在移动web(手机网站)上，遇到的问题，暂时就是上面这些了
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
