1.viewport
能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。
//表示支持响应式设计
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放(user-scalable=no//user-scalable=0,不允许用户手动缩放)
注意:content里多个属性的设置一定要用逗号+空格来隔开,如果不规范将不会起作用
WebApp全屏模式:伪装app,离线应用
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-mobile-web-app-capable" <span class="hljs-attribute">content=<span class="hljs-value">"yes" /> //<span class="hljs-comment">启用 WebApp 全屏模式</span></span></span></span></span></span>
隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-mobile-web-app-status-bar-style" <span class="hljs-attribute">content=<span class="hljs-value">"black-translucent" /></span></span></span></span></span>
添加到主屏后的标题
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-mobile-web-app-title" <span class="hljs-attribute">content=<span class="hljs-value">"标题"></span></span></span></span></span>
忽略数字自动识别为电话号码
<span class="hljs-tag">meta <span class="hljs-attribute">content=<span class="hljs-value">"telephone=no" <span class="hljs-attribute">name=<span class="hljs-value">"format-detection" /></span></span></span></span></span>
忽略识别邮箱
<span class="hljs-tag">meta <span class="hljs-attribute">content=<span class="hljs-value">"email=no" <span class="hljs-attribute">name=<span class="hljs-value">"format-detection" />
</span></span></span></span></span>
添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"apple-itunes-app" <span class="hljs-attribute">content=<span class="hljs-value">"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"></span></span></span></span></span>
<span class="hljs-comment"><!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --></span>
<span class="hljs-comment"><span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"HandheldFriendly" <span class="hljs-attribute">content=<span class="hljs-value">"true">
</span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- 微软的老式浏览器 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"MobileOptimized" <span class="hljs-attribute">content=<span class="hljs-value">"320">
</span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- uc强制竖屏 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"screen-orientation" <span class="hljs-attribute">content=<span class="hljs-value">"portrait">
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- QQ强制竖屏 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"x5-orientation" <span class="hljs-attribute">content=<span class="hljs-value">"portrait">
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- UC强制全屏 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"full-screen" <span class="hljs-attribute">content=<span class="hljs-value">"yes">
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- QQ强制全屏 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"x5-fullscreen" <span class="hljs-attribute">content=<span class="hljs-value">"true">
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- UC应用模式 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"browsermode" <span class="hljs-attribute">content=<span class="hljs-value">"application"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- QQ应用模式 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"x5-page-mode" <span class="hljs-attribute">content=<span class="hljs-value">"app">
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><span class="hljs-tag"><span class="hljs-title"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-attribute"><span class="hljs-value"><span class="hljs-comment"><!-- windows phone 点击无高光 -->
<span class="hljs-tag">meta <span class="hljs-attribute">name=<span class="hljs-value">"msapplication-tap-highlight" <span class="hljs-attribute">content=<span class="hljs-value">"no"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
网页相关
- 申明编码
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">'utf-8' /> </span></span></span></span></code>
- 优先使用 IE 最新版本和 Chrome
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=edge,chrome=1" /> <span class="hljs-comment"><!-- 关于X-UA-Compatible --> <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=6" ><span class="hljs-comment"><!-- 使用IE6 --> <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=7" ><span class="hljs-comment"><!-- 使用IE7 --> <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=8" ><span class="hljs-comment"><!-- 使用IE8 --> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
- 浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。
<code> <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"renderer" <span class="hljs-attribute">content=<span class="hljs-value">"webkit|ie-comp|ie-stand"> </span></span></span></span></span></span></code>
国内双核浏览器默认内核模式如下:
1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)
- 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"Pragma" <span class="hljs-attribute">content=<span class="hljs-value">"no-cache"> </span></span></span></span></span></span></code>
- Windows 8
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"msapplication-TileColor" <span class="hljs-attribute">content=<span class="hljs-value">"#000"/> <span class="hljs-comment"><!-- Windows 8 磁贴颜色 --> <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"msapplication-TileImage" <span class="hljs-attribute">content=<span class="hljs-value">"icon.png"/> <span class="hljs-comment"><!-- Windows 8 磁贴图标 --> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
- 站点适配:主要用于PC-手机页的对应关系。
<code><span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">name=<span class="hljs-value">"mobile-agent"<span class="hljs-value">content="format=[wml|xhtml|html5]; <span class="hljs-attribute">url=<span class="hljs-value">url"> <span class="hljs-comment"><!-- [wml|xhtml|html5]根据手机页的协议语言,选择其中一种; url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。 --> </span></span></span></span></span></span></span></span></code>
- 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta
<code><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"Cache-Control" <span class="hljs-attribute">content=<span class="hljs-value">"no-siteapp" /><br /></span></span></span></span></span></code>
2.Content-Type和Content-Language (显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内容。
用法:

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),