宽度：100％不会对手机浏览器的工作 [英] width:100% doesn't work on mobile browser

问题描述

首先我必须说，我想在这个网站所有的解决方案。我想设置宽度：100％的主分区。它在桌面浏览器而不是在移动浏览器。这是我主要的div的CSS：

First of all i must say that i tried all solutions on this site. I want to set width:100% on main div. It work on desktop browsers but not on mobile browsers. Here is css of my main div:

.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 is set to 100% too:

.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;
}

我试过：

• 设置最小宽度：100％; 来的身体，头，主


• 设置＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1/＆GT;


• ＆LT; META NAME =视CONTENT =WIDTH = 800/＆GT;


• 变换：规模（0.5）; ...

• set min-width: 100%; to body, header, main
• set <meta name="viewport" content="width=device-width,initial-scale=1" />
• <meta name="viewport" content="width=800" />
• transform: scale(.5); ...

什么是问题？

编辑：当页面加载DIV是100％。但我可以滚动到适合100像素或以上像素。 溢出-X：隐藏; 不起作用

when the page load div is on 100%. But i can scroll to right for 100px or more px. overflow-x: hidden; doesn't work.

推荐答案

这是一个已知的问题与Safari浏览器。您可以通过创建CSS视口，或通过添加最小宽度来CSS修复。

尝试最小宽度：980px;

This is a known issue with Safari Browser. You can fix it by creating CSS viewport, or by adding min-width to CSS.
Try min-width: 980px;

这篇关于宽度：100％不会对手机浏览器的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！