前言
已经好几天没有推文了,在这个五一佳节,想必各位同学玩耍的都比较愉快,本人实不忍心打扰到各位,故使这些天没有推送消息。今天是五一的最后一天,所以心想:本文应该能让各位同学提前收心,来送走这个愉快的假期,提前进入现状~
好了,不扯了,其实前言也不知道说些什么好,直接上正文又感觉太直接了,所以扯了一些白话,下面我们还是进入正题吧。
正文
keywords,description(经常用到的两个) 页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’逗号隔开
<meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">
<meta name="description" content="html meta标签大全,整理一下加强记忆">
Content-Type
告诉浏览器当前访问的资源类型并声明编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
viewport 随大小设备自动适配
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.5, minimum-scale=1.0, user-scalable=no"/>
什么是viewport?
简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport。如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其他值。就以手机来说吧,目前,新版本的手机浏览器,绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试,经过测试,iphone下的默认viewport为980px,安卓下的浏览器,目前主流的最新浏览器(比如chrome,还有很多国产的像qq,uc)的viewport也是980px了。
viewport是用来干什么的? viewport的默认值,一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候,可以让桌面端端网页正常显示(我们普通页面设计的时候,一般页面的主区域是以960px来做的,所以980px这个值,可以做到桌面端网页的正常显示)。但是,其实我们手机的屏幕宽度是没有960px的,因此浏览器会出现横向滚动条。同时,即使是基于980的viewport,我们在移动端浏览我们的桌面页面的体验其实也并不好,所以,一般的,我们会专门给浏览器设计一个移动端的页面。
viewport默认有6个属性,分别如下:
width: 设置viewport的宽度(即之前所提及到的,浏览器的宽度),这里可以为一个整数,又或者是字符串”width-device” initial-scale: 页面初始的缩放值,为数字,可以是小数 minimum-scale: 允许用户的最小缩放值,为数字,可以是小数 maximum-scale: 允许用户的最大缩放值,为数字,可以是小数 user-scalable: 是否允许用户进行缩放,’no’为不允许,’yes’为允许
apple-mobile-web-app-capable 设置Web应用是否以全屏模式运行。
<meta name="apple-mobile-web-app-capable" content="yes"/>
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
sharecontent
微信分享页面设置
<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>
refresh 重定向(以下示例5秒后会跳转到:https://www.wujiabk.com)
<meta http-equiv="refresh" content="5;url=https://www.wujiabk.com"/>
full-screen 全屏显示网页(部分移动端浏览器的专有属性)
<meta name="full-screen" content="yes"/>
browsermode 浏览器模式-强制坚屏显示(部分移动端浏览器的专有属性)
<meta name="browsermode" content="application"/>
format-detection
数据格式验证渲染:
<meta content="telephone=no" name="format-detection" />
<meta content="telephone=no,email=no,adress=no" name="format-detection" />
x5-orientation QQ浏览器强制竖屏
<meta name="x5-orientation" content="portrait"/>
x5-fullscreen QQ浏览器强制全屏
<meta name="x5-fullscreen" content="true"/>
x5-page-mode QQ浏览器应用模式
<meta name="x5-page-mode" content="app"/>
X-UA-Compatible IE的兼容模式:以IE的哪个版本去渲染页面(IE=8:以IE8的模式去渲染页面,IE=Edge:以最新版本的IE去渲染页面,当然这个最新指的是你系统装的最高版本的IE)
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
renderer 这貌似是360浏览器专用,兼容360的利器啊,360默认是用IE7去渲染页面的,不管你的系统装了多高版本的IE,这种行为真是业界毒瘤啊。
<!-- 默认webkit内核 -->
<meta name="renderer" content="webkit"/>
<!-- 默认IE兼容模式 -->
<meta name="renderer" content="ie-comp"/>
<!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-stand"/>
Cache-Control 设置缓存
<meta http-equiv="Cache-Control" content="no-cache"/>
手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
禁止复制、选中文本
element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
iphone及ipad下输入框默认内阴影
element{
-webkit-appearance: none;
}
ios和android下触摸元素时出现半透明灰色遮罩
element{
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩 备注:transparent的属性值在android下无效
Retina屏的1px边框
element{
border-width: thin;
}
旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
transition闪屏
/*设置内嵌的元素在 3D 空间如何呈现:保留3D */
-webkit-transform-style: preserve-3d;
/* 设置进行转换的元素的背面在面对用户时是否可见:隐藏 */
-webkit-backface-visibility:hidden;
圆角bug 某些Android手机圆角失效
background-clip: padding-box;
桌面图标
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。 上面的写法可能大家会觉得会有默认光泽,下面这种设置方法可以去掉光泽效果,还原设计图的效果!
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px)
启动画面
<link rel="apple-touch-startup-image" href="start.png"/>
iOS下页面启动加载时显示的画面图片,避免加载时的白屏。 可以通过madia来指定不同的大小:
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
ios 设置input 按钮样式会被默认样式覆盖
input,
textarea {
border: 0;
-webkit-appearance: none;
}
设置默认样式为none
IOS键盘字母输入,默认首字母大写 解决方案,设置如下属性:
<input type="text" autocapitalize="off"/>
select 下拉选择设置右对齐
select option {
direction: rtl;
}
消除IE10里面的那个叉号
input:-ms-clear {
display:none;
}