I've been developing a website on my local machine that has a fixed nav menu at the top. When a browser zooms in, I use media queries to compress the space between objects in the header so all objects fit on screen, and this works well on desktop.
However, I've noticed when testing on a mobile device (Android Galaxy S3) that these media queries are not triggered on pinch zoom, resulting in the icons expanding past the limits of the mobile viewport.
I can't find good documentation of this behavior online. I've seen it mentioned sporadically that this is designed behavior, and pinch zoom is like a 'magnifying glass' that should not activate media queries. I'm considering disabling the nav menu on mobile entirely. Is there a native way to deal with this problem, or will this require a javascript solution?
Here are two pictures. The first is the nav menu at no zoom, the second is the nav menu pinch zoomed on a mobile device.
Below are the two media queries I'm currently using. Note that I am using the meta viewport tag to set the content width as well; I can't think of anything else that might influence this behavior.
#media screen and (max-width: 74em){...}
#media screen and (max-width: 47em){...}
I have tried px measurements as well.
Let me know if any more information is required. Thank you for your help.
I was oscillating between fixing the viewport to the device width and fixing it to an absolute width, as well as testing between browsers. Setting the meta viewport tag to device-width works on some browsers, but not all, and it appears mobile has historically poor support for fixed headers. I ultimately opted to simply disable the header on certain devices; I think any other solution would demand using javascript and probably yield a pretty poor performance on mobile devices.
As well, setting the viewport to device-width may compress the body of an HTML page set to 100% height to less than the device height, which is a problem if you're working with a footer. I ultimately solved this by padding out the body with extra space depending on the aspect ratio.
After dealing with this problem I'd recommend avoiding fixed items on mobile devices, unless you specifically target a userAgent. In general mobile devices are too dynamic in size, and using fixed headers seem to be a bit more trouble then they're worth.
Related
My media queries work for all sizes I have specified when I use the responsive design mode in my browser. These same media queries will not work when I open my web App on a different device. For example, the height I have set for one of my div is: 197px for screen max-height: 700px and 290px for screen max-width: 1382px. When I use responsive web design, the media queries for both sizes work fine. When I resize my browser or open the same web App in my mobile (max-height below 700px), the media query is still rendering for screen width of 1382px.
Similarly media queries do not work when I resize my browser (on my laptop) instead of using responsive design mode.
What I understand is that media queries work on browser window size instead of the device's viewport size. I have tried using both media all and ```media screen```` and neither is helping resolve this issue. So, how do I write media queries to support browser window sizes?
Any help?
Thanks in advance
Two ways to solve the issue:
The not so practical way of adding a large number of breakpoints (for both max/min heights and widths). The problem that may arise is the ordering of media queries will get messed up, breaking the layout.
Using flexbox/grid at every level of your code. Even a floating menu or any other floating component should be put under a flexbox structure. In which case, you will have to write just the bare minimum number of media queries and the flexbox properties will take care of keeping your layout clean.
I am constructing a responsive website, and have designed it to look correct for desktop view.
I am currently tweaking it now for responsive breakpoints/media queries.
Here's the problem that I would like guidance on:
From my understanding, I've seen people only use width for their break points. In which case I did the same thing and make it look good on all the width break points.
However, I happened to be testing using the google chrome developer tool and started selecting specific devices (iphone 5, iphone 6, iphone 6 plus, ipad, etc.)
And noticed something alarming, which was that the elements was getting pushed off the screen vertically at the top and bottom because each of these devices not only have different widths, but HEIGHTS as well.
So the perfectionist in my is thinking about setting a media query for both height and width for every major device, but I realize that this work, although can be done, might not be the most efficient, and I have not seen other tutorials do this.
My specific question is: if there is a more efficient way to developing a responsive site without having elements go off the screen vertically.
Added information: I have a div that contains an img, then a h1 below it, then a bootstrap row with col-sm-6
The img width is in px (I experimented with vh/vw and %, but that seemed to make it more difficult to control when it scaled)
You can not set media query for device height, You can set height only,
And do not depend only in google chrome developer tool because sometimes it will not response in proper way, so you have to test in actual device for batter view.
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I have a question regarding responsive desing on tablets:
The goal is to have 2 or 3 divs below each other, 100% height so they look like full-screen pages. When visiting my responsive website (work in progress) on an iPad everything looks fine. But as soon as you turn the device, some unnecessary margins start to appear and the device will zoom in on the content.
My question:
Is this normal, or did I miss a few lines of code?
Edit: forgot to add the site http://www.danielsneijers.com/
This is a known bug with iOS and there is a workround available: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/
Wilst setting a maximum scale in the viewport will get round this, it also disables zooming on all devices which is very bad for accessibility and means your website is more likely to have issues with future devices.
I'm currently starting to use a responsive approach to my sites. I've found http://fluidbaselinegrid.com/ to be the best boilerplate for this. But with every boilerplate or grid I've tried I can't get an iPhone or iPad to recognize the media queries when you switch from portrait to landscape mode.
It always loads the correct css in the orientation that you load the page in. But when you go from portrait to landscape it hangs and doesn't resize properly.
You can even see this happening on http://fluidbaselinegrid.com/.
Does anyone know if this is a quirk with mobile webkit that we have to live with for now, or is there a way to fix this?
I contacted the developer behind Fluid Baseline Grid and got this answer:
I think what you are experiencing is the viewport meta tag.
Current:
Maximum-scale doesn't allow the user to zoom in/out with finger pinch.
However, it prevents the layout shifting when a device is changed from
portrait to landscape. This was purposely removed to help those who
may have impairment reading smaller text. You can can simply change
the meta tag in the head to set the scale, which will fix the zooming
issue when you rotate from portrait to landscape.
"If web developers want their scale settings to remain consistent when
switching orientations on the iPhone, they must add a maximum-scale
value to prevent this zooming, which has the sometimes-unwanted side
effect of preventing users from zooming in"
- http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/
That definitely fixes the issue, but it seems that you can't have the ability to zoom with a finger pinch and also control the way the layouts switch. Is there a way to work around this?
I solved adding 'initial-scale=1' only (and not 'maximum-scale=1') to the viewport meta tag