一、手机版页面的头部的标签
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>马贝商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
1. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”
http-equiv=“X-UA-Compatible” 是IE8的一个专有属性,是兼容模式的定义。用于指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题,在网页中,其指定的模式的优先权高于服务器中(通过HTTP Header)所指定的模式。该标签必须写在网页中除了title元素和其他meta以外的所有其他元素之前。
Edge模式告诉IE以最高级模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。
Chrome=1可以激活Chrome Frame ,如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF则使用最高版本的IE内核来进行渲染。
2. <meta name=“viewport” content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
meta viewport 标签目的是解决移动设备的viewport问题,ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类:
分类 | 含义 |
---|---|
layout viewport | 宽度大于浏览器可视区域的宽度。可以通过document.documentElement.clientWidth 来获取。 |
visual viewport | 可视区域的大小。宽度可以通过window.innerWidth 来获取。 |
ideal viewport | 理想大小,该宽度等于移动设备的屏幕宽度。 |
要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是两者都写上去,这样 initial-scale=1 解决了 iphone、ipad的问题,width=device-width则解决了IE的问题。
width 和 initial-scale=1同时出现,并且不相等,浏览器会取它们两个中较大的那个值。(ps:在uc9浏览器中,当initial-scale=1时,无论width属性的值为多少,此时viewport的宽度永远都是ideal viewport的宽度)
在苹果的规范中,meta viewport 有6个content属性值:
属性名称 | 属性值 |
---|---|
width | 设置layout viewport 的宽度,为一个正整数,或字符串"device-width" |
height | 同width |
initial-scale | 设置初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,可以带小数 |
maximum-scale | 允许用户的最大缩放值,可以带小数 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
总结:
第一、如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。
第二、每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device-width这个特殊值就行了,同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。
3. <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"
解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
4. <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
二、表单元素中提示文本颜色的设置
1. input 提示文本的颜色
input::-webkit-input-placeholder{
color:#999;
}
input:-moz-placeholder{
color:#999;
}
input:-ms-input-placeholder{
color:#999;
}
2. textarea 提示文本的颜色
textarea::-webkit-input-placeholder{
color:#999;
}
textarea:-moz-placeholder{
color:#999;
}
textarea:-ms-input-placeholder{
color:#999;
}
三、verticle-align
verticle-align的用法1
verticle-align的用法2
四、页面下方遮盖的内容区如何显现
当手机页面下方的内容被 footer遮盖没有显现出来时,如下图所示:
为了使内容区显现出来,可以通过设置最后一个元素的 margin-bottom 来实现。这样内容区就会被 margin-bottom 挤上来,全部显现出来。如下图所示:
ul li:last-of-type {
margin-bottom:4rem;
}