# 视图容器
## 概述
视图容器，即为存放所有视图骨架的 DOM 容器。除非明确指定，否则 View\.js 默认将 `document.body` 视为视图容器。
视图容器的作用，主要是为了限定视图的渲染范围、视觉位置，统一约束视图的外围轮廓等。通过调整视图容器的尺寸和位置，开发者可以实现不同的表现效果：
开发者可以借助浏览器的开发者工具，通过识别 `data-view-container` 属性确定当前的视图容器，例如：
也可以使用API得知：
## 状态表达
除了集中包裹视图之外，视图容器还承载着 “表达 View\.js 的初始化状态，以及当前活动视图” 的责任。这些信息的表达，通过在其 DOM 上附加相关属性完成，例如：
其中 `data-view-state=ready` 表示 “View\.js 已准备就绪”，`data-active-view-id` 代表当前活动视图的 ID，`data-active-view-namespace` 代表当前活动视图的命名空间。
## 其它控制
### 直接访问
开发者可以借助视图容器设定视图默认是否可以直接访问。
视图是否“可以直接访问”，是指视图在传播打开或刷新时，是否在页面装载完毕后第一个呈现给用户。
如果页面装载完毕后，用户看到的第一个视图不是被传播访问或刷新的视图，我们就说视图是“不能直接访问的”；反之，视图就是“可以直接访问的”。
开发者可以在视图容器的 DOM 结点上声明属性 `data-view-directly-accessible=true|false` 以设定“所有视图是否可以直接访问”，也可以在特定视图的骨架 DOM 结点上单独声明，以设定该视图的单独表现情况。例如：
{% tabs %}
{% tab title="main.html" %}
```markup
```
{% endtab %}
{% endtabs %}
其中，`view1` 不能直接访问（响应自身配置），`view2` 可以直接访问（响应自身配置），`view3` 可以直接访问（响应全局配置）。
没有在视图容器上声明 `data-view-directly-accessible` 属性时，View\.js 默认将所有视图设定为“不能直接访问”。
### 渲染宽高比
视图容器支持 `data-view-whr` 属性，以允许开发者设定视图在 PC 的桌面环境浏览时，视图容器渲染尺寸的宽高比。
当用户在移动端浏览网页时，这一属性并无作用。但当浏览环境是 PC 这一 “宽度大于高度” 的情况时，View\.js 将调整视图容器的渲染效果，使其 “高度撑满，宽度按比例动态计算，水平居中”，如下所示：
View\.js 默认将其设定为 "320/568"，即为 iPhone5 的宽高比。开发者可以按需在视图容器上调整属性值：
```markup
...
```
其效果效果如下所示：
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doc.view-js.com/main.-shi-tu-rong-qi.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.