什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局...移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。...Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度...minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放 Viewport 参考资料 Mozilla 开发者博客上有 viewport 使用教程。
5. rel=”apple-touch-icon” 解释：在iPhone, iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性..., 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。...继续滚动的速度和持续的时间和滚动手势的强烈程度成正比 10. pointer-events: none 解释：当鼠标点击设置了pointer-events: none属性的标签时，标签不起作用，会出现类似于标签的禁用效果点击此处查看详细解释...两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 15.... 解释：启用webapp的全屏模式，删除iPad或者iPhone上默认的工具栏和菜单栏 22
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style...什么是Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4...，直接用div标签 参考《如何去除android上a标签产生的边框》 winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight...chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.
移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。...另外为了保险起见再加入 这样写可以达到的效果是如果安装了 Google Chrome... 相关链接：WEB1038 - 标记包含无效的值 viewport viewport 可以让布局在移动浏览器上显示的更好...，请不要使用 initial-scale 或者禁用缩放。...=414"> 大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为
11、viewport模板 <!...，必须设置 `meta viewport’。...body元素的滚动条，所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动； Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...，不过随后这个特性又被移除； iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果 在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做： .xxx { overflow...: rgba(0, 0, 0, 0); } 但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。
启用 mixedContentMode 属性可能会危及用户数据的安全性，因此您应该 仅在必要时启用它，并在不需要时禁用它。...Viewport 元标记是指在 HTML 页面中的 标签，可以设置网页在移动端设备上的显示方式和缩放比例。...// 设置页面自适应 // Viewport 元标记是指在 HTML 页面中的 标签 , 可以设置网页在移动端设备上的显示方式和缩放比例 // 设置是否支持...元标记是指在 HTML 页面中的 标签 , 可以设置网页在移动端设备上的显示方式和缩放比例 // 设置是否支持 Viewport 元标记的宽度 settings.useWideViewPort...元标记是指在 HTML 页面中的 标签 , 可以设置网页在移动端设备上的显示方式和缩放比例 // 设置是否支持 Viewport 元标记的宽度 settings.useWideViewPort
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说...320，这才是第一行meta标签所达到的效果啊，所以在安卓2.3(或许是所有2.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。...首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。
正文 一、meta标签的总结 keywords,description(经常用到的两个) 页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’逗号隔开 Content-Type...简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的...我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport...但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。
比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说...动态修改 方法1：使用document.write动态输出meta标签 document.write('<meta name="viewport" content="width=device-width...第一：如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。...我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport
类似于 history.go(-1); 而 safari（包括桌面版和 ipad 版）的后退按钮则不会刷新页面，也不会提交数据申请。...类似于 javascript：history.back(); 17.Meta 基础知识： // width 设置viewport宽度，为一个正整数，或字符串‘device-width...-- 设置缩放 --> 其他meta标签 <!
1、首先我们来看看webkit内核中的一些私有的meta标签 （现在大部分移动浏览器包括wp都支持viewport的width选项），这些meta标签在开发webapp时起到非常重要的作用，可以给用户提供更好的体验...1.0，且不允许用户点击屏幕放大浏览； 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone...为达到适配各种手持设备，建议前端工程师使用自适应布局模式，因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，...8、如何去除Android平台中对邮箱地址的识别 看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。...meta标签： <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable
通过viewport来匹配设备宽度 网上常见的做法： 这样，设计Mobile Web页面的时候，只需要按照640px的宽度进行设计就可以了。...PS： 刚才搜索了一下viewport这个概念博大高深，里面还涉及到dpi等，我这里只是一种偷懒的方法。...-- hides browser chrome --> <!...，页面自动向上滚动，导航了就看不到了，第一页的高度就多了50px。
标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览...第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。...、chrome都能够正常的显示，你无需再次考虑设备的分辨率。...最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 还有就是，有些手机网站我们看到如下声明： 但是为了更好的兼容，我们会使用完整的viewport设置。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。...touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event``preventDefault()可以阻止默认情况的发生：阻止页面滚动。...MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:none;}可以阻止默认情况的发生：阻止页面滚动。...，PC端的该属性已经被移除，该属性在移动端要生效，必须设置meta viewport。...
解释一下就是，visual viewport是页面当前显示在屏幕上的部分，用户可以通过滚动来改变他所看到的页面部分，或者通过缩放来改变visual viewport的大小。...Meta viewport标签 这个标签实际上就是向HTML文件中插入如下句式的标签，起初起源于Apple： 苹果公司私有的meta标签，可以使web应用在全屏模式下运行，否则将用safari浏览器展示其内容 默认情况下，Safari和IOS会自动识别像手机号码的文本，这个meta标签是用来禁止这项功能的 <link rel="apple-touch-icon" href="...相似地，Google <em>Chrome</em>在安卓平台上也提供了类似的功能，不同<em>的</em>是android会自动识别邮箱地址，而ios是电话号码： <<em>meta</em> name="mobile-web-app-capable"
1.0，且不允许用户点击屏幕放大浏览； 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone...、 chrome都能够正常的显示，你无需再次考虑设备的分辨率。...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...8、如何去除Android平台中对邮箱地址的识别 看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。...meta标签： 1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable
-- 宽度默认100%全屏宽度，禁止手指缩放，初始缩放值1.0 --> <meta name="viewport" content="width=device-width,initial-scale...-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <!
一旦网页过期，必须到服务器上重新传输。--> 属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。可以在微软官方文档获取更多介绍。...在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。...,chrome=1"> ps：为防止失效，X-UA-Compatible最好紧跟在head之后，之前不要有任何不标准的标签。...-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
