As far as can tell it's impossible to use the max-height media query usefully because of Chrome 67 on iOS.
The issue is that as the users scroll up and down Chrome adds and removes the address bar. As it does this it changes the max-height which means that if you're using a max-height media query to change the height of something than anything below the something will jump when the users scrolls up or down.
For example I have an image that's 300x500 but on a short screen I wanted to make sure it didn't fill the screen so I have something like this
#media (max-height: 700px) {
img {
max-height: 400px;
}
}
Effectively "if the screen is short make the image short too"
But what happens on Chrome iOS is that on iPhone X as it adds and removes the address bar it triggers the media query
If there's a few images on the page and the user is near the bottom as they scroll up and down the page will jump half a screen or more.
Note that Safari on iOS doesn't have this issue even though it also makes the address bar appear and disappear.
I can choose some other max-height to trigger on but of course the same thing could happen on any phone of any height so it's looking like using max-height to trigger things is hopelessly broken?
Is there a way to achieve what I'm trying to do?
turns out this is a bug in iOS WkWebView and/or Chrome iOS. The bug is tracked here so if they manage to fix it then I guess the problem is solved.
https://bugs.chromium.org/p/chromium/issues/detail?id=720048
Related
I'm currently working on a website and I have one particular issue with responsiveness.
The website looked very good and resized appropriately when I changed the size of the browser window from maximum to minimum. However I did get an issue on mobile devices where the website was cut off at the right and the title text was overflowing. I managed to reproduce the issue in the browser as well by making the window as small as possible and then zooming in until I got a horizontal scroll bar. Scrolling all the way to the right then revealed the issue.
I tried to fix it for mobile devices by including the following code in my CSS:
#media(max-width: 700px) {
html,body {
width: 150%;
height: 200%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
It did solve the overflow issue but now after initial loading the page on mobile is zoomed in and I have to double tap to reset the zoom. I was unable to find a solution for this issue to reset the zoom automatically.
Also shrinking the browser window on PC with this code in place cuts off the website at the right side when the media query is executed.
Here is the code together with a way to look at the issues. If you want to see the original issue you only need to delete the media query from the top of the CSS file.
https://codepen.io/lapierre-bernard-david/pen/NWqZMqd
I'm very new to web development so I'm pretty sure what I came up with is more of a hack than an actual solution. I'd be very happy about any advice.
As I've seen many people with a similar issue, I did include the often suggested viewport header of course, and I have no fixed width anywhere in my code.
I'm making an HTML email that has a mobile and desktop version. The way I'm accomplishing this is by making two separate tables, one with an id of #desktop and the other with one as #mobile. At a certain point with a media query (around 450px) I set display for #desktop to none, and it works. On my phone, only the mobile version shows up as expected; however, on desktop, when prompted with the "Display Images Below" from gmail, after clicking it, the mobile version of the email shows up below the desktop version (even though it's display is naturally set to none).
Now. I've tried a million ways to fix this. I've tweaked the media queries. I gave #mobile a margin to hide it, I changed all the images to background-images, but for some reason no matter what I do I can't get around this... has anyone had a similar experience where they found a solution?
I think i know whats happening here and since you havent given any code to go with i will take a stab in the dark. For mobile verison to hide completely, you need the images to be set at 1px x 1px or 0px x 0px.
You are controling the mobile version using CSS so each you can target each of the images and give it a width of 100% and height auto important.
Let me know if it works for you.
I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm at the very start of creating a clients website, however i've already hit a stumbling block; i am trying to add a ribbon type look to the navigation in Wordpress, however whenever i add a padding or margin to the navigation (namely .menu ul), on iOS devices like the iPhone and iPad, the right side of the ribbon extends across the screen further than it should.
Any idea as to what is causing this?
Site in question: http://site.n8geeks.com
Edit: I changed the width of the .menu ul - It appears when i add a pixel value, it is interpreted differently in iOS browsers, however when i add a percentage value it seems fine on iOS. Any ideas why this is?
Edit2: Now the issue is that the top part of the ribbon doesn't show on the right hand side on iOS devices (the bit that 'bends behind' the page). Any help?
Thanks.
For those who may have a similar issue to me in the future, the problem was that Safari was taking the parent wrapper and resizing it to fit the screen. Fixing this involved adding a new wrapper that was bigger than the #page wrapper.