Clever Geek Handbook

Safari mobile update error when using CSS3 media queries

I am developing a site that will display on iPad Mobile Safari and standard PC browsers. To adapt my layout (especially for mobile browser, I use this CSS3 media query:

    @media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
        #galleria {
        margin-left: 5%;
        margin-top: 15%;
        }
    }

    @media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
        #galleria {
        margin-left: 16%;
        margin-top: 15%;
        }
    }

This method works, but when I rotate my device, errors appear. Basically this page has a named "logo" that represents the image, here's the CSS:

    #logo {
        position: absolute;
        top: 30px;
        left: 26%;
    }

    #logo img {
        width: 75%;
    }

This image gets smaller every time I rotate the device. How can I avoid this error? Thanks for all the answers!

+3


source to share


1 answer


Since you are using a percentage width that doesn't get smaller, your screen gets bigger ... that ratio hasn't changed ... what if you don't want it to resize, you can either not heavily-code the pixel size, but not a percentage size ... or you can calculate the percentage and convert it to pixel size and then load it as a variable so that after screen rotation it doesn't update to the new size (lesser illusion).



0


source






More articles:


All Articles