自定义用户代码片之（移动端viewport理想视口）_移动端页面设计理想视口代码写在哪里-优快云博客

本文链接：https://blog.youkuaiyun.com/PengHengYYDS/article/details/120885775

本文介绍了如何在Visual Studio Code中创建自定义代码片段，特别是针对HTML文件，以简化编写包含viewport设置的头部信息的过程。通过新建全局代码片段文件，输入预设的HTML结构并保存，可以快速插入包含viewport元标签的HTML模板。此外，还提供了删除代码片段的方法以及代码片段的存储路径。

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

viewport理想视口

布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)

<span style="background-color:#f8f8f8"><span style="color:#333333"><meta name="viewport" content="width=device-width, initial-scale=1.0 "/>;</span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"></span></span>

1. 以上的代码，我们每次反复的书写，非常的繁琐，自定义用户代码片

点击设置用户代码片段

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

3. 输入新建代码片的名字：

4. 把默认生成的示例代码删掉，复制进新的代码，如下： 5. 复制新的代码，保存：

新的代码如下：{
{
   "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",
           "</html>