I'm loading iframes for a special application and need a way to disable the responsive coding (viewport and media queries) in all iframes.
Is there a simple way to do this? Let's say applying an ID to the element was out of the question (since it's from another domain).
Related
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 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)
Is there a meta tag or other flag that would let a browser identify that a site is designed with responsive or fluid layouts vs. a fixed layout?
Trying to determine via client-side feature detection whether a served page has a fluid layout or not.
Along width #media queries, the presence of the viewport meta tag indicates a responsive site. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
you can check the presence of the viewport tage with js: Can I change the viewport meta tag in mobile safari on the fly?
I don't thing there is a meta tag for it but what you could do is read the style sheet with javascript and find #media screen keyword so you can determine if the site will indeed be responsive here take a look at this
https://stackoverflow.com/a/324533/1287608
I have a page that loads an iFrame (fancybox). My CSS media queries work fine on the parent pages but when the content is called within the iFrame, the media queries don't work. (the content within the iFrame has it's own stylesheet).
How do i get the media queries to work within the iFrame?
FYI - My width and height is being set by the javascript that calls 'fancybox' which creates the iFrame and is set using percentages.
Unless I'm very much mistaken, you have very little 'outside' control over the contents of an iframe with your CSS. I think you're kind of out of luck.
Ok, So I designed a responsive layout that doesn't show images for very small screen sizes, using media queries and display: none;.
So far so good. But these images still download on these devices, causing an increase in bandwidth.
What is the proper way to make these images not download on the specified devices?
Any response would be much appreciated!
Two options I can think of:
Detect small devices on the server using browser-sniffing, and send them different HTML that doesn’t reference the images.
Display the images via CSS instead of HTML (in style attributes if you like), using either background-image or :before/:after and content (not supported by IE 6 or 7), and wrap that CSS code in media queries so that it’s only displayed by devices with larger screens.
The only accessible solution right now is to wrap the image with <noscript> tags, then pull the image out later with javascript. Cookies don't work on first page load (HTMLPreloadScanner), nor with CDNs. Browser-sniffing is useless if your images aren't always 100% of the viewport.
Slimmage.js implements context-friendly responsive images in 3KB of vanilla JS.
The markup is pretty simple as well:
<noscript data-slimmage>
<img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>
Of course, you can make a server-side helper to even abstract this away.
If you don't mind a javascript dependency you could check window.innerWidth and insert image tags for sufficiently large screens.
Images would only be requested if javascript is enabled and the window big enough.
If you don't have any issues using additional JavaScript, then you may try THIS. I've stumbled upon it while searching and learning about media queries.