fixed 定位变成了相对于 body定位，而不是相对于浏览器可视区定位

[yinjun1991]

最近一个项目中引用了 flexible.js，发现了一个问题：
我需要在屏幕正中央显示一个提示窗，于是使用了 position: fixed 定位，结果发现提示窗并未出现在窗口正中央，而是网页正中央，而且会随着网页滚动。

于是我进行了测试，截图如下：
发现确实 fixed 定位的元素尺寸都是按照 body 来的，请问有遇到类似问题的吗？这是什么原因导致的呢

[emthink]

出现这个现状的原因是你head里面缺少声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个涉及到viewport的概念，在桌面浏览器中，浏览器窗口就是我们CSS布局时，使用相对宽度时能使用的最大宽度。在移动浏览器中则不同，很多PC网站显示不全，于是支持我们可以使用viewport控制视口：分视觉视口，布局视口，理想视口。

1. 视觉视口是当前屏幕上页面的可见部分。
2. 布局视口是我们进行CSS布局时使用的。在CSS布局中，比如百分比宽度是相对于布局视口来计算的，布局视口通常比视觉视口宽，通常被默认设置为980px.
3. 理想视口，是指设备的屏幕尺寸，单位为物理像素。device-width返回的就是设备的理想视口宽度。

参见我的博客：http://blog.codingplayboy.com/2016/07/31/mobile_viewport/

position:fixed固定定位始终是相对于viewport视口的，其宽度百分比是相对于布局视口宽度；在PC，布局视口宽度就是真实宽度，但是在移动设备上，这个宽度也相对于布局（layout） 视口宽度，其默认值为980px，除非我们强制设置viewport的width=device-width或我们需要的值，如320，这个时候，布局就看起来正常了。

[hnsxxscyx]

上面的解答是错误的。fixed并非总是相对于视口。详见这篇文章：chokcoco/iCSS#24