html 构建响应式网站之viewport的使用

本文介绍了如何使用viewport元标签实现网页自适应不同设备的屏幕尺寸,包括设置网页宽度、初始缩放比例等属性。

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

在网页代码的头部,加入一行viewport元标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />   //viewport 元标签
...
</head>
...

viewport是网页默认的宽度和高度
上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width)
原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

viewpoint说明

  • width 控制viewpoint的宽度,可以是固定值,也可以是device-width,即设备的宽度
  • height 高度
  • initial-scale 控制初始化缩放比例,1.0表示不可以缩放
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
    可见如果不定义viewpoint的话,页面宽度以屏幕分辨率为基准,而设置以后可以根据设备宽度来调整页面,达到适配终端大小的效果

什么是Viewport?
       手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

转载于:https://www.cnblogs.com/wspblog/p/4988805.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值