I would like to use a conditional statement to attach a different stylesheet for:
if the clients resolution is <= 1024*768
I'm pretty sure this is possible, but have never seen the code for it before?
ps. I am not looking for a javascript solution
Typically people don't "attach another stylesheet" for screen resolution because you could resize the browser after page load, changing the resolution, and you don't want file loading every time you do.
This will do the trick, in one CSS file:
Ex:
/* css as usual */
.this-class { font-size: 12px; }
/* condition for screen size minimum of 500px */
#media (min-width:500px) {
/* your conditional / responsive CSS inside this condition */
.this-class { font-size: 20px; }
}
This should change the font size to 20px when the #media query condition is true, in this case when the screen is over 500px.
As you size your browser up and down you will see the conditional CSS rules take effect automatically, no JS needed.
CSS 3 introduces media queries, but it is new and support is not all that widespread yet (Firefox only introduced it in version 3.5, for instance, and Internet Explorer won't get it until version 9) so build with progressive enhancement in mind. CSS Tricks has a tutorial for providing different CSS for different browser window sizes (which is a more useful metric then display resolution).
You can test support for your browser.
There's this option, totally client side and javascript driven, add a script tag:
<script type="text/javascript">
if (screen.height < 900) {
document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');
} else {
document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');
}
</script>
You could even add other if statements for smartphones and tablets.
Related
I need to do some scaling of the page and prevent it from closing in when keyboard shows up on mobile devices. Also it should work on a wide range of screens. To do so I use viewport meta tag. I figured a workaround where I fix the innitial-scale, maximum-scale and minimum-scale to one value which I calculate in JS. Is there a way to calculate this value and assign it in CSS? Can, and should I access meta tag from css? I've actually tried to do that but it didn't seem to work. Code below:
JS:
if (screen.width<1024){
var a = screen.width/window.innerWidth;
var txt = "width=device-width, user-scalable=0, maximum-scale=" + a + ", minimum-scale=" + a;
document.getElementById("viewportMetaData").setAttribute("content", txt);
}
HTML:
<meta name="viewport" id="viewportMetaData" content="user-scalable=0">
CSS:
#media all and (max-width: 1024px) and (orientation: landscape) {
#viewport {
min-zoom: width/(100*vw);
max-zoom: width/(100*vw);
user-zoom: 0;
}
Meta tags are not meant to be changed or affected by Css Classes. That is in contrast with the definition of Meta tags (https://www.w3schools.com/tags/tag_meta.asp).
However, if you want to solve your issue, you may be adding an event listener to the main window using javascript and whenever the window is resized, it changes the viewport value.
The answer to your second question is no, you shouldn't. But it will probably be more useful for you to try understanding the relationship between the viewport tag and media queries, which you can learn more about here. Also, as to deciding how to approach viewports vs. media queries during development, you may find these answers helpful as well.
As to your first question, without seeing your exact issue, it's hard to point to a specific solution. However, if this is mostly an Android issue, the following media queries may be useful in resolving your screen-width issue while the keyboard is present:
Portrait view:
#media screen and (max-aspect-ratio: 13/9) {
/*
focus on element styles in portrait view, not meta tags
*/
}
Landscape view:
#media screen and (min-aspect-ratio: 13/9) {
/*
focus on element styles in landscape view, not meta tags
*/
}
I'm new to web design and trying to make my site laptop friendly. I decided to use media queries to pull up different stylesheets as the window sizes change. This works great with Chrome and IE but Firefox uses the stylesheet I've written for laptops regardless of whether I pull it up on my laptop or my 1080p monitor.
This is the media query I'm currently using.
<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />
I've already checked all my extensions and none of them are making a difference.
Any help would be greatly appreciated.
Change your link to:
<link rel="stylesheet" href="styleslaptop.css"/>
Then open styleslaptop.css and at the bottom of the file add this:
CSS
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
I got the media queries from this article: Media Queries for Standard Devices
The best way to determine your breakpoints is by design not by device, but if your site is not that complex, cookie cutter should suffice.
UPDATE
Upon inspection of your 2 stylesheets I believe I know why the laptop CSS doesn't work in Firefox. At the end of both stylesheets you employ a rarely used at rule: #-moz-document url-prefix() {} This rule targets specific pages with the prefix(http://example.com/path/). An explanation of #document rule is here. There's two minor problems and one major problem with this:
The #document rule is only supported by Firefox.
If you really want to use this useless rule, then you should put a url in the parenthesis ex. #moz-document url-prefix(http://example.com/path)
So right now on the desktop CSS the properties and values that are in that rule set apply to all pages IF your'e using Firefox. Now on to the major problem.
On your laptop CSS you are missing the closing bracket of the #document rule set. This explains why you see a big difference in Firefox and why the media queries I gave you didn't work. To fix this simply go to the very bottom of your laptop CSS and place a }. You should now see Firefox the way you expected it to look, but keep in mind there are some extra rules in the dektop CSS:
#testimonialscontent h2 {
padding-top:0.25%;
padding-right:0;
font-size:1em;
}
body {
background-color:white;
}
FURTHER ADVICE
It's good that your'e taking the time to learn esoteric things, but be aware of how other developers do things as well. There's a slew of useless properties and rules that are too specific in purpose or to narrow in compatibility. Most but not all of them have vendor prefixes -moz, -webkit, etc. These are for the most part experimental, partially supported, and/or limited in some way, so remember Caveat emptor. So when you want to use something you don't see used very often or something with vendor prefixes, go to: http://caniuse.com/, a search will yield info such as which browsers support a property, element, etc.
On the stylesheets, one should try to use one stylesheet that has all of your custom styles. You should use your desktop CSS as the core rules, then place all of the new rules (not all of the rules) you have for the laptop and put them at the bottom of the core rules (desktop CSS), then put them inside the media query as I originally explained. The reason why you need to minimize the number of external files (not just .css but .js as well) is because they incur an extra HTTP requests, see this: Seven Mistakes that Make Websites Slow.
Good luck, sir. If I helped, don't forget to click that green checkmark and I if really helped helped you out, click that upvote arrow as well . ;)
Put your media queries inside your css file..
Link like this
<link rel="stylesheet" href="styleslaptop.css" />
And in your css wrap everything between
#media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }
I know there are 2 ways to add Media queries:
HTML LINK:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
#media all and (max-width: 1024px) {
......
}
I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:
Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?
Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
If the above file is added using HTML Link like this:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:
#media all and (max-width: 1024px) {
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
}
So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?
EDIT:
I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:
So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?
For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media="(max-width: 1024px)". But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?
Here is what W3C has to say about this:
The media attribute says which media the resource applies to. The
value must be a valid media query.
[...]
However, if the link is an external resource link, then the media
attribute is prescriptive. The user agent must apply the external
resource when the media attribute's value matches the environment and
the other relevant conditions apply, and must not apply it otherwise.
Note: The external resource might have further restrictions defined within
that limit its applicability. For example, a CSS style sheet might
have some #media blocks. This specification does not override such
further restrictions or requirements.
I tested the behavior in Chrome using the following markup:
<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">
Apparently, Chrome downloaded all CSS files regardless of screen resolution.
However, it applied the rules from matching stylesheet(s) only
And it honored all matching #media rules within the stylesheet
Regarding the stylesheet download, here is what the current spec draft says:
User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.
This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.
For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting #media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.
With HTML media queries, the CSS files are downloaded whether or not the media query is satisfied or not. But the prasing of unwanted CSS is kind of deferred and this advances your initial render. In a way, you can think of making it, non-render blocking. But with CSS media queries, they are completely parsed and processed whether or not the query is satisfied.
I'm just wondering if it is possible to target a tablet without using media queries. The reason I ask this is that I already using media queries but I have images that are grayscale on desktop and when hovered they change to the original colour. I have removed the grayscale when the device hits a certain size so it is fine on smaller tablets and mobiles but it is just a bit too small for the ipad and certain tablets when they are landscaped.
Is there any way to target the tablet to turn the filter off without touching the media queries?
Thanks in advance
The website in question is www.garethjweaver.com
Have a look at the Mobile ESP framework; specifically the JavaScript one. It can detect individual devices or groups of devices such as tablets.
http://blog.mobileesp.com/
The method most pertaining to what you want to achieve is:
MobileEsp.DetectTierTablet();
It also allows you to pick specific groups of tablets by OS:
MobileEsp.DetectAndroidTablet();
MobileEsp.DetectWebOSTablet();
MobileEsp.DetectIpad();
MobileEsp.DetectMaemoTablet();
MobileEsp.DetectBlackBerryTablet();
MobileEsp.DetectOperaAndroidTablet();
A possible usage scenario:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.hand-interactive.com/js/mdetect.js"></script>
<script>
$(function() {
if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true
$("html").addClass("isTablet"); // this will add the isTablet class to the HTML element
}
});
<script>
The example above uses jQuery, which will make things easier for you if you are getting started with JavaScript. With that in place you just need to set up rules for your tablets in your stylesheet like this:
<style>
body {
max-width: 1200px;
}
.isTablet body {
max-width: 100%;
}
</style>
It also has other versions for ASP.NET and PHP so you can do the detection server side.
Here's a fiddle illustrating the functionality outlined above:
Fiddle
I get that you don't want to touch the media query, but as far as I can see it feels like your problem can be solved by
#media (orientation: landscape) { ... }
You want to determine if it's a landscape view..right?
about other usages of media query MDN:media query
if you really don't want to touch it, there is another option is to use javascript. But I think that will be make things more complicated.
Hope my answer helps..:)
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.