宽度:100%在移动浏览器上不起作用

Fakt7

首先,我必须说,我在此站点上尝试了所有解决方案。我想width:100%在主div上设置它适用于台式机浏览器,但不适用于移动浏览器。这是我的主要div的CSS:

.main {
    height: 100%;
    width: 100%;    
    margin-left: auto;
    margin-right: auto;
    margin-top: -66px;
    opacity: 0.83;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    -webkit-box-shadow: 7px 7px 7px #CCC;
       -moz-box-shadow: 15px 15px 15px #CCC;
            box-shadow: 20px 20px 20px #000;
    background-color: #FFFFFF;
    color: #000000;
}

主体定义为:

html, body {
    height: 100%;
}
body {
    width: 100%;    
    height: 1100px;
    background-color: #222930;
}

标头也设置为100%:

.header {
    height: 93px;
    width:100%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color: #F0EBEB;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

我试过了:

  • 设置min-width: 100%;为主体,标题,主要
  • <meta name="viewport" content="width=device-width,initial-scale=1" />
  • <meta name="viewport" content="width=800" />
  • transform: scale(.5); ...

怎么了

编辑:当页面加载div为100%时。但是我可以向右滚动100px或更多px。overflow-x: hidden;不起作用。

艾哈迈德·哈布(Ahmad Harb)

这是Safari浏览器的一个已知问题。您可以通过创建CSS视口或添加min-width到CSS来修复它
尝试min-width: 980px;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

div宽度100%在移动浏览器中不起作用

来自分类Dev

div宽度100%在移动浏览器中不起作用

来自分类Dev

为什么地理定位在移动浏览器上不起作用?

来自分类Dev

Selectize.js-退格键以清除该字段在移动浏览器上不起作用

来自分类Dev

Ajax功能在移动浏览器上不起作用

来自分类Dev

选择的插件似乎在移动浏览器上不起作用

来自分类Dev

为什么此create-react-app在移动浏览器上不起作用?

来自分类Dev

Flex证明内容,对齐项在Safari或移动浏览器上不起作用

来自分类Dev

为什么我的jquery代码在移动浏览器上不起作用

来自分类Dev

Facebook App链接(深层链接)在移动浏览器上不起作用

来自分类Dev

为什么(MouseUp mouseDown)在移动浏览器上不起作用?

来自分类Dev

此代码在PC浏览器上效果很好,但在移动设备上不起作用

来自分类Dev

@media max-width在移动浏览器上不起作用?

来自分类Dev

SAPUI5 keyup 事件在移动设备的浏览器上不起作用

来自分类Dev

为什么 fetch 在我的移动浏览器上不起作用?

来自分类Dev

AngularJS在某些浏览器/设备上不起作用

来自分类Dev

getUserMedia在新的浏览器上不起作用

来自分类Dev

setOnMouseDragged在浏览器视图上不起作用

来自分类Dev

JavaScript pushState在返回的浏览器上不起作用

来自分类Dev

字体在Windows版本的浏览器上不起作用

来自分类Dev

Atrributes Selection在Android浏览器上不起作用

来自分类Dev

AngularJS在某些浏览器/设备上不起作用

来自分类Dev

jQuery POST在某些浏览器上不起作用

来自分类Dev

Whatspp 按钮在浏览器上不起作用?

来自分类Dev

CSS在移动浏览器中不起作用

来自分类Dev

离子移动浏览器测试不起作用

来自分类Dev

SpeechSynthesisUtterance在移动浏览器中不起作用

来自分类Dev

退出MatDialog在移动浏览器中不起作用

来自分类Dev

在本地运行的报表查看器工具,在浏览器上不起作用

Related 相关文章

  1. 1

    div宽度100%在移动浏览器中不起作用

  2. 2

    div宽度100%在移动浏览器中不起作用

  3. 3

    为什么地理定位在移动浏览器上不起作用?

  4. 4

    Selectize.js-退格键以清除该字段在移动浏览器上不起作用

  5. 5

    Ajax功能在移动浏览器上不起作用

  6. 6

    选择的插件似乎在移动浏览器上不起作用

  7. 7

    为什么此create-react-app在移动浏览器上不起作用?

  8. 8

    Flex证明内容,对齐项在Safari或移动浏览器上不起作用

  9. 9

    为什么我的jquery代码在移动浏览器上不起作用

  10. 10

    Facebook App链接(深层链接)在移动浏览器上不起作用

  11. 11

    为什么(MouseUp mouseDown)在移动浏览器上不起作用?

  12. 12

    此代码在PC浏览器上效果很好,但在移动设备上不起作用

  13. 13

    @media max-width在移动浏览器上不起作用?

  14. 14

    SAPUI5 keyup 事件在移动设备的浏览器上不起作用

  15. 15

    为什么 fetch 在我的移动浏览器上不起作用?

  16. 16

    AngularJS在某些浏览器/设备上不起作用

  17. 17

    getUserMedia在新的浏览器上不起作用

  18. 18

    setOnMouseDragged在浏览器视图上不起作用

  19. 19

    JavaScript pushState在返回的浏览器上不起作用

  20. 20

    字体在Windows版本的浏览器上不起作用

  21. 21

    Atrributes Selection在Android浏览器上不起作用

  22. 22

    AngularJS在某些浏览器/设备上不起作用

  23. 23

    jQuery POST在某些浏览器上不起作用

  24. 24

    Whatspp 按钮在浏览器上不起作用?

  25. 25

    CSS在移动浏览器中不起作用

  26. 26

    离子移动浏览器测试不起作用

  27. 27

    SpeechSynthesisUtterance在移动浏览器中不起作用

  28. 28

    退出MatDialog在移动浏览器中不起作用

  29. 29

    在本地运行的报表查看器工具,在浏览器上不起作用

热门标签

归档