I want to apply media query only when page scrolled xxxx pixels down Is there any way I can do that with media query without JS?
UPDATED
The reason I am asking because none of JS plugins based on offset position are working on iPad, iPhone and Safari, they are not calculating offset properly Fixed position delayed on IOS and Bootstrap scrollspy not working on iPad
So I thought may be I can do that with media query if it is possible.
No you can't do that with a media query, media queries are used to test screen sizes for responsive web design.
You're going to have to use javascript to check scroll position then apply the media query accordingly.
you could use twitter bootstrap scrollspy method: http://getbootstrap.com/javascript/#scrollspy
This isn't possible with Media Queries, but you are able to do this with JavaScript. If you're having issues with ScollSpy maybe take a look at Waypoints. This works on mobile and is an incredible library to have in your toolbelt. This will let you react to the user's scrolled position.
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'm a little bit confuse when using Media query for responsive web design.
Actually, I'm new to it and I also want to ask that: is it necessary to add media query every single time you have a CSS error when shrinking down the web browser? I used to do it and my css had like a lot of media queries in it!
You should use media queries when you want to specify different style for a particular height/width of the screen.
Media queries can also be used to change layout of a page depending on the orientation of the browser.
Please use this link to find out more..
7 Practices for Effective Media Queries
Do use media query to design layout for desktop version. You should always think for mobile first layout then use media query to decide how should it look like in desktop version of site.
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.
I need to style an iFrame differently based on if it is loading on an iPad or desktop. I'm guessing this is done with a media query but I cannot find a solution. I need to use on only one style sheet.
Have you tried using #media max-device-width=1024{}? This should get your css working on an iPad and anything smaller.
Also set a percentage width on your iFrame tag, so it sizes to the screen.
I am building a responsive design with bootstrap and I have two navigation bars, one for mobile and one for desktop.
Being a mobile first framework, the desktop one only triggers at min-width:992px and otherwise is set as display:none. I have a whole bunch of css for the desktop navigation, now I was wondering if it would be best to put it in the min width 992 media query, or just leave it outside of the media query.
What is the best practice?
Also, does media query CSS only get loaded when the media query is triggered? I'm fairly sure that CSS just gets loaded as is, but thought i'd ask.
You should try to use (%) instead of (px)