Question

我在设计移动版网站时遇到问题。我有这个模态，我想让它延伸到屏幕的整个宽度，所以我添加了以下css：

.suggestions-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
    z-index: 3;
}

html的结构如下：

<body>
    <div class='container-fluid'>
        <div ng-view class='ng-scope'>
            <div id="full-warning" class="visible-xs visible-sm md-modal full-color warning md-effect-8 suggestions-modal fadeIn" ng-show="showModal">

如果我检查每个元素，我可以看到以下尺寸：

 <body> <!-- 320 x 568 -->
        <div class='container-fluid'> <!-- 320 x 6835 -->
            <div ng-view class='ng-scope'> <!-- 290 x 6835 -->
                <div id="full-warning" class="visible-xs visible-sm md-modal full-color warning md-effect-8 suggestions-modal fadeIn" ng-show="showModal"> <!-- 360 x 639 -->

我无法理解为什么将宽度设置为100％会超出设备的宽度。（在这种情况下是iphone 5，总宽度为320px）

我在html头中有这个metatag：

<meta name="viewport" content="width=device-width, initial-scale=1">

模态中没有任何内容具有固定宽度，如果我清空并只留下模态div，内部没有其他内容，它仍具有相同的尺寸。

有什么建议吗？

移动设备的100％宽度超过视口

0 个答案: