I'm trying to find out how to render different critical css or load different stylesheets based on the viewport/device. This might be a dublicate question, but everywhere I look, the given answer seems to bee "Use media queries". But this doesn't solve the issue i'm trying to fix.
My main issue is with performance and user metrics. I want to optimize the amout of css that's being loaded. Now i've noticed some sites don't scale up/down when changing the viewport size because they only load the css for the viewport size on load. (I've noticed that the 'mobile' stylesheets are loaded when using responsive inspector mode, which leads me to think it's not the viewport size but most likely the device type or something like that)
An example of this is used by Google. For example their doodles page loads mobilestyles.css when loaded in responsive mode and styles.css when loaded on regular size:
HTML head when loaded regular view
HTML head when loaded responsive view
This doesn't seem to be dynamically altered after load with javascript in any way. How does the served html change based on the device making the request and is it possible to use this to serve/render a different <style> tag for viewport specific critical css?
I believe you are talking about how sites like Instagram and YouTube make changes on their sites while still staying on the same device. Their style, though, after resizing for PC, doesn't look like the phone's one. You might want to try this; It has worked for me till now:
This will determine whether the device is mobile or PC.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check for Device and Change CSS</title>
<script type="module">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
var head = document.getElementsByTagName('HEAD')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style-for-mobile.css';
head.appendChild(link);
} else {
var head = document.getElementsByTagName('HEAD')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'general-style.css';
head.appendChild(link);
}
</script>
</head>
<body>
</body>
</html>
And, Then make two different files for CSS. One for mobile devices and then another for maybe desktop devices.
/*style-for-mobile.css*/
*{
background-color: black;
}
/*general-style.css*/
*{
background-color: blue;
}
Check these articles:
How to load CSS using Javascript? - GeeksforGeeks
How to detect a mobile device using jQuery? - StackOverflow
Try this:
<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css" />
<link rel="stylesheet" media="screen and (max-width: 767px)" href="mobile.css" />
Also, it might be a smarter move to make mobile css inside the regular one, using media queries, so you can avoid sacrificing 1 http request that is being used by importing the second css. :)
An example of how you can style css for different devices inside the regular css:
/* min size style*/
#media screen and (max-width:320px) {
/* put your css style in there */
}
/* middle size style */
#media screen and (min-width:321px) {
/* put your css style in there */
}
/* large size style */
#media screen and (min-width:800px) {
/* put your css style in there */
}
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 have added some css media queries but it doesn't seem to make any change, I mean I have added this code
#media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}
but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference, am i missing something here ? do i have to add something more than this in my css to make it work ?
below given is my default css for both classes
.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}
My advice would be to test the code in a real mobile phone not with a browser if that's what you are doing cause browsers behave differently
Another important thing you must do is add meta view port tag without that it won't work like the one given below
<meta name="viewport" content="width=device-width, initial-scale=1" />
Remove !important from your default css use css specificity instead if its really necessary so your default css should be
.leftSideBar{display:block;}
.rightSideBar{display:block;}
if even that doesn't work you have to show us your entire css or html to identify the problem
Everything looks fine in your code.
Try with this meta in your html :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, if I can give you a little advice, try the mobile first way. It looks like this :
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
#media screen and (min-width:640px) {
/*design for screen-width >= 640px */
}
This gives a priority on mobile devices so computers will be set as the exception in order to have less code executed on mobile devices which are quite less powerful than a computer ;)
here is a little / great tutorial on mobile first approach :
http://www.html5rocks.com/en/mobile/responsivedesign/
Good luck and give your html and full css if it's still not working.
The min-width and !important are probably useless. The query is fine, but it may be shortned to just:
#media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}
Should be working either way. Are you sure the html is fine? You may want to show that here as well.
This code is the best for mobile friendly responsive web:
<meta name="viewport" content="width=device-width, initial-scale=1" />
I am modifying my CSS3/HTML5 site to work with different Medial Queries.
The site pages are in the Root directory. The CSS files are within a folder in the root directory called css.
Within the HEAD tags of my page, I have one CSS file for the default stuff and then I have another one for iPad in an external CSS file called ipad.css
When I am in the Developer Tools within Google Chrome, it doesn't seem to be applying the rules within the ipad.css file. I know this because I am wanting to change the text size of an element and it is not changing. Nothing is happening.
This is what I have within the HEAD tags:
<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles">
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">
According to the Google Chrome Developer Tools, an iPad width is 768px. I have referenced this within the link tag. Any ideas or suggestions welcome.
Use max-width: 768px rather than max-device-width: 768px.
Also, remember to specify a viewport meta tag in the head section of your html.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, you might want to check
What is the difference between max-device-width and max-width for mobile web?
Also, keep in my you're not targeting devices, you're targeting resolutions.
Another possible source of your problem might be that you are using less specific selectors in your ipad.css. Don't forget that the styles from your default.css are also used on resolutions lower than 769px!
To test this, put this css rule on the very top of your ipad.css:
* { display: none !important; }
If your site vanishes then, your stylesheet is loaded and applied.
I tried the max-width as well and the style isn't applying. Even if I change the font-color of the text within the div class (p tag), nothing is happening.
As an example, I have a div class called banner-textoverlay so, in my ipad.css file, I wrote the following to see if it would change the text color and nothing happens at all.
.banner-textoverlay p {
font-color:#000000;
}
I have a site which I am trying to get to sit perfectly in all devices.
I'm using media queries to specify a different layout based on the device. I have an issue with the viewport however.
My viewport tag is:
<meta name="viewport" content="width=device-width">
It sits perfectly on the iPad but on the android tablet, it seemingly ignores the meta viewport tag.
(excuse the crappy photos. iPhone camera! Using colleagues' tablet and didn't want to get into his email to send myself screen grabs)
Here is how it loads - notice how it doesn't show the zoom level correctly. It is zoomed in too far and some of the page is off the right of the screen:
when I pinch zoom out (as far as it will allow) it appears like this - This is how I want it to appear on first load before the user zooms out:
When I rotate the device, it doesn't change the display width at all so it appears at the same zoom level but with white space on either side.
Does anyone have any ideas how I can get it to behave so I can go for the weekend and consume alcohol?
Your page is being cropped because the size of your browser css pixel is larger than the size of your devices physical pixel.
Try placing this JavaScript in your header as a fix for your problem.
<script type="text/javascript">
var scale = 1 / window.devicePixelRatio;
var viewportTag = "<meta id=\"meta1\" name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";
document.write(viewportTag);
</script>
Different versions of Android handle the viewport differently.
What version of Android are you using?
Here is my lame javascript hack to fix it:
<head>
<!-- other stuff in the head tag goes here -->
<script type="text/javascript">
function viewport_to_device_width() {
// omit viewport meta tag (to force setting initial scale to full extent) by returning false
var b = true;
if (window.navigator.userAgent.match(/android 2.2/i) || window.navigator.userAgent.match(/android 2.3/i) || window.navigator.userAgent.match(/android 4.0/i)) {
b = false;
} else if (window.navigator.userAgent.match(/android/i) && window.navigator.userAgent.match(/Linux armv7l/i) && window.navigator.userAgent.match(/fennec/i)) {
b = false;
}
return b;
}
if (viewport_to_device_width()) {
// omit viewport meta tag for Android 2.2 and Android 4.0 to force setting initial scale to full extent
document.write('<meta name="viewport" content="width=device-width">');
}
</script>
<noscript>
<meta name="viewport" content="width=device-width">
</noscript>
</head>
Have you tried adding initial-scale=1.0 to your content? That should work, but if it doesn't, I might try throwing some more properties in there. You can read more about all the different viewport properties here.
Different browsers are working differently. The only browser that I can make work properly on the Nexus 7 is Dolphin, which has other problems with HTML5 buttons etc.
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.