Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS First RWD – Media Queries not working on some phones

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #170786
    gnng
    Participant

    Working on my first full RWD – here it is on a test server Your text to link here…

    It works on iPhone and iPad. It works my friends brand new Samsung Note. But when I ask a friend with a Galaxy 3 and another Note to check it the media queries are not kicking in and the page is a total mess!

    If you can help could you paste this into your phone (www.sandiegohomegrown.com/testSDTG/) and let me know if it is working? You should see a nice, clean, mainly text-only site versus one with lots of graphics. And if there are any RWD gurus out there who can provide any tips I am very grateful. This is driving me nuts!!

    Gary

    #170787
    Paulie_D
    Member

    Perhaps, rather than just giving us a link you could share your media queries with us.

    I also assume you are using the appropriate meta tag?

    #170788
    gnng
    Participant

    Yes, I have the meta tag for viewport. The CSS media queries are long and involved but you can get to them pretty easily on your browser. The issue is that the media queries only seem to work on some phones and sometimes they work on one and not the other of the same phone. This is my first RWD and not sure how to move on if the site is not rendering correctly on every popular phone.

    #170795
    Paulie_D
    Member

    You making me do work when you could just post the code here. It’s not hard.

    The media queries, we only need to see the headlines…not the whole code.

    I don’t want to have to inspect your site for the media queries and meta tag.

    #170851
    NeoWebr
    Participant

    if it helps…
    Looks good on my Samsung GS4, portrait and landscape.
    Looks good on my Ipad (original model) in landscape mode. In portrait mode the right side of the screen is white space (about 1.5 inches worth) and the footer is very tall, but the content is all there.

    #170853
    Paulie_D
    Member

    You still haven’t shown us your actual code.

    #170854
    gnng
    Participant

    Sorry for slow response – I can only code in the morning before work. Here are the media queries.

    @media handheld and (max-width: 1235px), screen and (max-device-width: 1235px), screen and (max-width: 1235px) {

    @media handheld and (max-width: 1085px), screen and (max-device-width: 1085px), screen and (max-width: 1085px) {

    @media handheld and (max-width: 977px), screen and (max-device-width: 977px), screen and (max-width: 977px) {

    @media handheld and (max-width: 845px), screen and (max-device-width: 845px), screen and (max-width: 845px) {

    @media handheld and (max-width: 799px), screen and (max-device-width: 799px), screen and (max-width: 799px) {

    @media handheld and (max-width: 744px), screen and (max-device-width: 744px), screen and (max-width: 744px) {

    @media handheld and (max-width: 699px), screen and (max-device-width: 699px), screen and (max-width: 699px) {

    @media handheld and (max-width: 622px), screen and (max-device-width: 622px), screen and (max-width: 622px) {

    @media handheld and (max-width: 550px), screen and (max-device-width: 550px), screen and (max-width: 550px) {

    @media handheld and (max-width: 468px), screen and (max-device-width: 468px), screen and (max-width: 468px) {

    @media handheld and (max-width: 404px), screen and (max-device-width: 404px), screen and (max-width: 404px) {

    @media handheld and (max-width: 350px), screen and (max-device-width: 350px), screen and (max-width: 350px) {

    /* Galaxy Note2 – Portrait */
    @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {

    /* Galaxy Note2 – landscape Due to the Screen Height and Width is changing during orientation changes /
    /
    @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape)*/
    @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2){

    #170855
    gnng
    Participant

    NewWebr, thank you. I haven’t gotten to the footer yet so not worried about that. So it’s sort of good that it is working, sort of, on your phone. The design should be very simple – is that what you see (versus on the desktop where you get all the colorful boxes)?

    #170856
    Paulie_D
    Member

    I really think that all those (max-device-width: ) & (-webkit-min-device-pixel-ratio: ) might be the issue.

    If you have the appropriate meta tag..they aren’t required.

    #170935
    gnng
    Participant

    I added those last two media queries when I searched and found that others were having problems with Samsung phones. However, the issue is that it works on some phones but does not work on others – even if it is the same model and the latest OS.

    Here is my meta tag:
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    #170936
    Paulie_D
    Member

    I still think that DPR would only be useful for limited circumstances rather than on every query.

    #170965
    paulob
    Participant

    That looks way to complex for what is essentially a simple site.

    Forget about devices and device width and make your layout work throughout the range on the desktop first (device width and layout width are not the same thing and bear no relation to each other anyway).

    At the moment on the desktop anything below 1000px width in the browser is either broken or has a large vertical scrollbar.

    What you are essentially interested in is layout width and this essentially covers all devices automatically. No need to target handheld in your media queries as indeed that probably confuses the situation even more. No need to cater for min and max width in the same media query but just over-ride in successive media queries.

    Simplify and then simplify some more :)

    Don’t target devices but create a design that goes from small to large in your desktop browsers and in most cases that will collect all devices on the way. Apply breakpoints with media queries at points where the design needs it and not where you think a device will sit. There are too many devices and too many widths to cater for individually so cater for them all with a design centric approach and collect them all on the way automatically. If you use max-width (or min-width if mobile first) media queries you cater for all devices automatically including their orientation changes.

    See my answer here to a similar problem in another thread.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.