@media being ignored by iOS ?
-
Topic
-
J,
In THEME OPTIONS>CONFIG> when “No, allow website to show normally on tablets and mobile devices.” is checked, does that effect iOS will process and additional @media rules we add to custom.css (or any imported css)? Our @media rules are testing fine in normal browsers, but seem to be completely ignored by iOS.
-
Replies
-
No, there’s nothing that would cause @media queries to not work. But are you taking into account the default viewport of an iOS device, which is I believe 980px?
When you disable the theme’s responsiveness, you’re essentially doing two things. —
- Remove responsive.css from being called
- Remove viewport
<meta>
When you setup a responsive site, you need to declare this viewport meta in order for it to display the actual pixel size of the device’s screen in iOS. Without it, iOS attempts to display the website as it would show on a computer, and thus the viewport is much larger.
Specifically, this is what the theme hooks to wp_head for responsivenss:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To clarify: we want the exact non-responsive appearance from standard to mobile (yep). The problem is that with responsiveness turned off, the main menu items are inexplicable wider than they should be. We’ve attempted to patch it with @media (live debugged in iOS simulator + safari AND Adobe Edge Inspect CC) and it’s not working, plus we can’t find any other reason why it should appear differently. All menu modifications we’re made using the exact menu #access classes from theme.css. It may be related to viewport meta because it’s also happening on Android devices – in TB how can we turn on/code just the viewport meta?
I wouldn’t make such a big deal but a similar issue is happening on another site using BC and I suspect the cause may be the same. See screenshots or links, but first prepare to travel to the land of design from 2002..
http://bonsai-design.com/
http://bonsai-design.com/wp-content/themes/barelycorporate-child/custom.css
http://bonsai-design.com/wp-content/themes/barelycorporate-child/menus.css
http://phase5design.com/themeblvd/iOS.jpg
http://phase5design.com/themeblvd/android.jpgAll right, so as I tried to explain above, the native viewport size on an iPhone is 980px and that’s obviously a little bit more narrow than your site, right? — With all the sections accounted for, and all padding and margin, etc.
You can read up on this topic here: Safari Web Content Guide
If you were going to use @media queries to make changes, you’d target the 980px breakpoint.
@media (max-width: 980px) { .whatever { ... } .whatever-else { ... } }Or, why not just widen the viewport for the site you’ve designed?
<meta name="viewport" content="width=1050">
J,
We dev mobile sites outside of WP and understand viewport meta and @media. Issue #1 is that there is a difference between standard and mobile on a site that is 945px wide. Issue #2 is that 0% of the @media queries we test are working in iOS when BC responsiveness is turned off. Not even overt tests to see any reaction. Issue #3 is that turning off theme responsiveness disables the viewport meta. If #3 is the cause of #1, then how do we tell the theme to leave the viewport meta active?I was a little confused from your original post, I think, and wasn’t totally sure what you were trying to accomplish. Generally people turn the option off because they want their site to just display naturally on mobile, as it would on the desktop.
So, is your goal essentially to remove the theme’s responsive.css so you can totally style the responsiveness of the site yourself?
If so, after you turn off the theme’s responsive option, just put this in your site’s
<head>that I gave you originally:<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then you will have the theme’s default viewport meta present, your site will load on iOS at the true size of the viewport, and turning off the option is simply removing the responsive.css file.
Sorry i tried to clarify in the second post: we want a non-responsive site just as you described. The issue is that it doesn’t appear as it should – the menu is inexplicably larger. The @media was only a patch, not an attempt at writing a custom responsive-ness. BUT, I thought if we put the viewport meta back into header.php that theme theme would kill it.
BUT, I thought if we put the viewport meta back into header.php that theme theme would kill it.
If you do this, you’re going to end up with your desktop website, but with the device zoomed into the (for example) 480px area an iPhone displays at in portrait, if that makes sense? So, that’s not what you want.
I think there is just some miscommunication between us. Let’s look at that original screenshot you posted:
When I look at this, the issue doesn’t look to me like your menu items are wider on mobile. It looks like your site is being displayed in the compacted 980px area the iPhone gives you by default.
Issue #2 is that 0% of the @media queries we test are working in iOS when BC responsiveness is turned off.
This statement isn’t technically possible 😉 — unless you had a typo somewhere in your CSS before or something that broke the stylesheet moving forward — So, anyway, that’s why it made me assume you were just trying to target viewport sizes less than 980px, and seeing that they have no effect.
Let’s just try an experiment. If you haven’t yet, try like I suggested before and put this as your viewport meta in your
<head>and what does your site look like?<meta name="viewport" content="width=1050">
J,
I should have explained the root problem it more clearly. Again, if you’re ever in Denver, drinks are on me…so I’ve tested the viewport meta at 2 sizes:
1. At 1.0 the menu appears the same as without it, but with it, iOS is reacting to @media so I can make menu adjustments to fake a normal looking menu. However I still don’t understand the root issue, which is that the menu is definitely, weirdly, wider on mobile (each item gets increasingly wider from right to left), see screenshot of iOS over a standard browser…everything is exact but the logo and menu.2. At 1050px it of course just pushes the site outside the viewport. See screenshot.
http://phase5design.com/themeblvd/standard_over_mobile.jpg
http://phase5design.com/themeblvd/viewport_1050.jpgYeah, so @media queries aren’t really going to work here because you’re no longer dealing with a responsive viewport. Here’s maybe another approach you could try —
You could put some sort of body class in there when it’s mobile. Here are some examples:
function my_body_class( $class ) { $browser = $_SERVER[ 'HTTP_USER_AGENT' ]; // iPhone if ( strpos( $browser, 'iPhone' ) !== false ) { $classes[] = 'ios'; $classes[] = 'iphone'; } // iPad if ( strpos( $browser, 'iPad' ) !== false ) { $classes[] = 'ios'; $classes[] = 'ipad'; } // Android if ( strpos( $browser, 'Android' ) !== false ) { $class[] = 'android'; if ( strpos( $browser, 'Mobile' ) !== false ) { $class[] = 'android-mobile'; } else { $class[] = 'android-tablet'; } } // WP's check for any kind of // mobile device or tablet if ( wp_is_mobile() ) { $class[] = 'mobile'; } return $class; } add_filter( 'body_class', 'my_body_class' );I didn’t have time to test this. I essentially just wrote it by looking up all of the user agents. Basically, you’d do something like the above in your Child theme’s functions.php, and then you’d have those classes on the
<body>tag you could use for styling like:.ios .whatever { ... } .iphone .whatever { ... } .ipad .whatever { ... } .android .whatever { ... } .android-mobile .whatever { ... } .android-tablet .whatever { ... } .mobile .whatever { ... }http://stackoverflow.com/questions/12305566/what-is-the-ios-6-user-agent-string
Thank you for creating the above code. It’s getting a bit Occam’s Razor – my fault.
1. Our client wants and identical site on all devices.
2. We turned responsiveness off in BC, which implies that, by default, the site on mobile devices will look identical to its standard-browser rendering.
3. The site is 99% identical across standard browsers and mobile devices. Only the menu is resizing itself on mobile devices. The site is using the theme’s 960 width and the menu css is all in pixels, not %. What are your theories as to why it could be rendering differently with responsiveness turned off?A shared experience across multiple browsers is just part of the deal of developing websites, and iOS safari is another browser with its own slight variations in interpreting the different little aspects we try to develop in.
I would ensure that you’ve set your initial viewport size to fit whatever you think will accommodate your website’s layout and give it room to breathe. From there, you’ve got this, which will give you the means to make any style tweaks you need to get your customizations to look just right in mobile Safari, the way your client wants it.
If you have to, I would just style the menu anchors to have 1px less of padding or something on mobile safari. Whatever you need to tweak it to do what you want.
And I don’t believe the menu is re-sizing itself on mobile. I think it’s just that your calculations of font-weight+font-size+padding are not interpreted identically on iOS safari.
- The forum ‘Barely Corporate Responsive WordPress Theme’ is closed to new topics and replies.