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

本文详细解析了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的尺寸做出来的东西。

还有一点,这种情况css尺寸单位用px就好,不要用rem,避免增加复杂度。

2. 网易的做法

先来看看网易在不同分辨率下,呈现的效果:
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
太长了 转好文章http://caibaojian.com/mobile-responsive-example.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值