移动端视口

最新推荐文章于 2025-03-06 19:46:39 发布

简单437

最新推荐文章于 2025-03-06 19:46:39 发布

阅读量485

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_60146725/article/details/121039720

版权

本文详细介绍了布局视口和视觉视口的概念，以及它们在PC和移动设备上的区别。强调了理想视口对于移动端网页的重要性，提供了一种快速创建理想视口的VSCode代码片段方法，并通过实例展示了理想视口与未设置理想视口的差异。此外，还分享了如何删除自定义代码片段的步骤。

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

视口分哪些？

1.视觉视口：意思显而易见就是视觉可以看的到得，

2.布局视口：写html代码时内容布局得宽高。

1.布局视口

拿一个简单非常容易理解得代码片段来说：

在这里给div设置了70%的宽度并加上了背景颜色是在写html代码时给div布局的宽度看到的带颜色的这段这就称为布局视口当然你设置宽度为百分之120%也好还是多少整个显示器为100% 设置为120% 那内容当然会超出屏幕

如下图所示此时div宽度为 120% 浏览器下方很明显多出了滚动条超出了屏幕本身的宽度你设置多少取决你的需求是你自己在写代码时设置的这就是布局视口与设备本身宽度大小没有关系

2.视觉视口：

视觉可以看到的内容用户设备所能看到的网页区域

在pc端我们可以随意改变浏览器窗口的大小但是大部分移动设备是不支持改变浏览器宽高的所以视觉视口也可以称之为移动设备屏幕的大小因为你视觉能看到的就是设备整个屏幕中的网页内容用户可以通过缩放操作视觉视口同时不影响网页本身布局的宽高

那么真正适合移动端的视口是什么？？

viewport理想视口！！

布局视口宽度=视觉视口宽度=设备宽度（=内容宽度）

以上就是理想视口的代码但是我们每次反复的书写代码有些复杂非常繁琐

告诉你一个好的方法！！非常快捷方便！！

打开vscode 左下角有一个设置的图标然后点击自定义代码片段

选择新建全局代码片段文件

‘输入新建代码片的名字：

此时会显示一大串代码不要慌！！把这些默认的代码删掉

把以下代码复制粘贴

{
	"html": {
		"prefix": "html",
		"body": [
			"<!DOCTYPE html>",
			"<html>\n",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>",
			"\t<link rel=\"stylesheet\" href=\"$1\">",
			"\t<script src=\"$2\"></script>",
			"</head>\n",
			"<body>\n$3",
			"</body>\n",
			"<ml>"
		],
		"description": "The full sample code - html5."
	}
}

然后新建一个html文件输入html 按enter 即可