Meta标签总结及常见问题的解决方法
2019-9-20 hubo Web前端
一、meta标签的总结
1.keywords,description(经常用到的两个)
页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开
2.Content-Type
告诉浏览器当前访问的资源类型
3.viewport
随大小设备自动适配
说明:
什么是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’为允许
4.apple-mobile-web-app-capable
设置Web应用是否以全屏模式运行。
说明:
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
5.sharecontent
微信分享页面设置
6.refresh
重定向(以下示例5秒后会跳转到:https://www.wujiabk.com)
7.full-screen
全屏显示网页(部分移动端浏览器的专有属性)
8.browsermode
浏览器模式-强制坚屏显示(部分移动端浏览器的专有属性)
9.format-detection
数据格式验证渲染:
telephone:而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!默认开启
email:浏览器会识别邮箱并加样式,点击可以调用系统默认邮件应用给该地址发邮件,默认开启
adress:adress=yes就开启了点击地址直接跳转至地图的功能,默认开启
10.x5-orientation
QQ浏览器强制竖屏
11.x5-fullscreen
QQ浏览器强制全屏
12.x5-page-mode
QQ浏览器应用模式
13.X-UA-Compatible
IE的兼容模式:以IE的哪个版本去渲染页面(IE=8:以IE8的模式去渲染页面,IE=Edge:以最新版本的IE去渲染页面,当然这个最新指的是你系统装的最高版本的IE)
14.renderer
这貌似是360浏览器专用,兼容360的利器啊,360默认是用IE7去渲染页面的,不管你的系统装了多高版本的IE,这种行为真是业界毒瘤啊。
//默认webkit内核
//默认IE兼容模式
//默认IE标准模式
15.Cache-Control
设置缓存
说明:
手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
二、常见问题解决方法:
1.上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2.禁止复制、选中文本
element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
3.长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
iphone及ipad下输入框默认内阴影
element{
-webkit-appearance: none;
}
4.ios和android下触摸元素时出现半透明灰色遮罩
element{
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩
备注:transparent的属性值在android下无效
5.Retina屏的1px边框
element{
border-width: thin;
}
6.旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
7.transition闪屏
/*设置内嵌的元素在 3D 空间如何呈现:保留3D */
-webkit-transform-style: preserve-3d;
/* 设置进行转换的元素的背面在面对用户时是否可见:隐藏 */
-webkit-backface-visibility:hidden;
8.圆角bug
某些Android手机圆角失效
background-clip: padding-box;
9.桌面图标
iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
上面的写法可能大家会觉得会有默认光泽,下面这种设置方法可以去掉光泽效果,还原设计图的效果!
图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px)
10.启动画面
11.iOS下页面启动加载时显示的画面图片,避免加载时的白屏。
可以通过madia来指定不同的大小:
12.ios 设置input 按钮样式会被默认样式覆盖
input,
textarea {
border: 0;
-webkit-appearance: none;
}
设置默认样式为none
13.IOS键盘字母输入,默认首字母大写
解决方案,设置如下属性:
14.select 下拉选择设置右对齐
select option {
direction: rtl;
}
15.消除IE10里面的那个叉号
input:-ms-clear{display:none;}