width:100% doesn't work on mobile browser

问题

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

body is defined:

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

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

I tried:

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

What is problem?

Edit: 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.

回答1:

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;

回答2:

Finally it fix overflow-x:hidden. Page load with 100% width but i can scroll to right.

来源：https://stackoverflow.com/questions/25105944/width100-doesnt-work-on-mobile-browser

标签

html

css

mobile

width

browser