Search code examples
csssafarimedia-queries

Responsive design on Safari media queries issue


I got a problem with website. It's a jquery mobile framework, and the responsive design works well in Chrome and Firefox, but it does not in Safari on the mobile view. i inspect it and looks like thet the media queries bellow 600px doesnt work. Could you give me any help? i wanna try whit some hacks but i dont know how to use it in media queries.

@media screen and (max-width: 320px){ 
.mi-slider {
    text-align: center;
    height: auto;
}

.mi-slider ul {
    position: relative;
    display: inline;
    bottom: auto;
    pointer-events: auto;
}
*/much more styles*/
}

Solution

  • Sorry for answer my own question, but i could fixed it, was easy, just making a new .css for hacks:

    <link rel="stylesheet" href="css/webkit.css" media="screen and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
    

    and there put the media queries

    @media screen and (max-width: 1024px){
    #text_biblioteca {
        margin-left:24.553954%;
    }
    #image2_biblioteca {
        margin-left:24.165918%
    }
    #box2_biblioteca {
        margin-left:7.57416%
    }
    }
    

    and done!!!