关于mate标签及移动端viewport 适配++几种大厂案例分析

最新推荐文章于 2025-07-03 15:27:38 发布

ggyyjavascript

最新推荐文章于 2025-07-03 15:27:38 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签：移动端适配 app适配 mate rem viewport

原文链接：http://caibaojian.com/mobile-responsive-example.html

html 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了HTML中mate标签的各种属性及其应用场景，包括定义文档关键词、页面描述、作者信息，以及如何设置页面自动刷新。特别聚焦于viewport属性，阐述了其在移动端显示优化中的作用，如设置布局视口的宽度、初始缩放值等参数，确保网页在不同设备上完美呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.mate属性

实例 1 - 定义文档关键词，用于搜索引擎：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：

<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：

<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：

<meta http-equiv="refresh" content="30">

 实例 5 - viewport 属性，它用于移动端显示优化的

 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" ">
 
  	width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
	initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
	minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
	maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
	height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
	user-scalable	是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许

viewport 深入理解

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->

互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案：

固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
使用flexbox解决方案
使用百分比加媒体查询
使用rem

1. 简单问题简单解决

我觉得有些web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：
在这里插入图片描述

它的页面有一个特点，就是：

顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变
中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边
这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：

这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4和6：
在这里插入图片描述

6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从代码也可以证实这一点：

不过如果你拿到的是根据4的设计稿，那就没有问题，比4分辨率大的设备肯定能显示根据4的尺寸做出来的东西。