I built a site using HTML, CSS, and Javascript. It has two layouts I would like the site to choose automatically using the screen size. To do this, I linked to two CSS files in my index file. Here is how I formatted it.
<link rel="stylesheet" media='screen and (min-width: 750px)' href="css/largeScreen.css">
<link rel="stylesheet" media='screen and (max-width: 750px)' href="css/smallScreen.css">
This works on my computer when I change the size of my browser window. However, when I uploaded my site online and accessed it with my phone, I realized that it doesn't pick the correct layout (should be from the smallScreen.css file).
If anyone can help me with this issue, it would be greatly appreciated. :)
Like #ThomasAltmann said, have you set
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in your <head>? I came accross this issue that had me stumped for hours before realizing I forgot this tag. This tells mobile browsers not to automatically scale the website to display it as if it were on a normal desktop-sized window.
I have nine different CSS files. My website will not load until browser downloads all the CSS files. Most of CSS not even needed for home page. In JavaScript you can do like <script async>,
but for stylesheets, what will be best solution?
I have searched found following articles
Code Pen
keithclark.co.uk
They recommend to use
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
or
<head>
<!-- head content -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- body content -->
<link rel="stylesheet" href="style.css">
</body>
By default, CSS is treated as a render blocking resource, which means
that the browser won't render any processed content until the CSSOM is
constructed. Make sure to keep your CSS lean, deliver it as quickly as
possible, and use media types and queries to unblock
rendering.
-- Google Developers
By default, CSS is treated as a render blocking resource.
Media types and media queries allow us to mark some CSS resources as non-render
blocking.
The browser downloads all CSS resources, regardless of
blocking or non-blocking behavior.
CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.
However, what if we have some CSS styles that are only used under certain conditions, for example, when the page is being printed or being projected onto a large monitor? It would be nice if we didn’t have to block rendering on these resources.
CSS "media types" and "media queries" allow us to address these use cases:
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
By using media queries, we can tailor our presentation to specific use cases, such as display versus print, and also to dynamic conditions such as changes in screen orientation, resize events, and more. When declaring your style sheet assets, pay close attention to the media type and queries; they greatly impact critical rendering path performance.
Let's consider some hands-on examples:
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
The first declaration is render blocking and matches in all conditions.
The second declaration is also render blocking: "all" is the default type so if you don’t specify any type, it’s implicitly set to "all". Hence, the first and second declarations are actually equivalent.
The third declaration has a dynamic media query, which is evaluated when the page is loaded. Depending on the orientation of the device while the page is loading, portrait.css may or may not be render blocking.
The last declaration is only applied when the page is being printed so it is not render blocking when the page is first loaded in the browser.
Source - Render blocking CSS -
We use cloud typography for a selection of web fonts chosen by a designer. The response time is creating a lag that people have begun to notice.
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
Is there a way, while still respecting CT's licencing model to bring these fonts in locally? Or do I switch to standard web fonts?
To sort of explain my answer/comment...
Say you have something like this for example..
<link type="text/css" rel="stylesheet" href="localfolder/main.css" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="localfolder/other.css" />
<link type="text/css" rel="stylesheet" href="localfolder/again.css" />
<link type="text/css" rel="stylesheet" href="localfolder/some.css" />
<link type="text/css" rel="stylesheet" href="localfolder/thing.css" />
You can change this to something more like...
<link type="text/css" rel="stylesheet" href="localfolder/css.php" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
With the php file of css.php being like this
header("Content-type: text/css");
require "localfolder/main.css";
require "localfolder/other.css";
require "localfolder/again.css";
require "localfolder/some.css";
require "localfolder/thing.css";
exit;
Basically this will combine all of your local CSS into a single script, which you can then use a PHP cache control and gzip to ensure your local CSS is sent as quick as possible in a single http/file request
... And your second link for typography tag will start downloading straight away as well
As soon as your first link tag (the css.php) is finished being downloaded/checked.. It will continue with anything else in the head tag until they are all done.
This may work for you, it really does very per site/design.. Basically most browsers will download only so many files at once... refer to Max parallel http connections in a browser? for some more info on this...
--- Another possible option ---
You can load the page without the typography link/tag.. and then add it dynamically via javascript.. see something like this How to load up CSS files using Javascript? for an example..
The side effect here depending on how the site is designed, would be that you might see old/default fonts for a few seconds or something.. But you can hide this from the user with a re-design possibly or some form of loader..
Otherwise the only other option i can think of is to try finding the same font or similar with google fonts https://www.google.com/fonts as they do load quicker in general.. And the advantage of using a google hosted css/js/lib is that alot of users also already have them cached because they are common across alot of other sites.
Hopefully this can give you some idea's or possibly help with a solution, but it is a tricky question and a good one... This is how i would deal with it if i was in the same situation.
A lot of web pages use a Print stylesheet to format things better for printing. My question is, is it possible to force the browser to render a page using the print stylesheet without actually printing it?
In Chrome (version 78), you can force the browser to render the webpage's print stylesheet using Chrome DevTools by going to More Tools > Rendering
then selecting the Print option in the Emulate CSS Media dropdown
usually the print css has a media type of print. simply remove the media definition and use it in replace of the main style sheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
change to
<link rel="stylesheet" type="text/css" media="all" href="print.css" />
I am using the following HTML on my site:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld"/>
</head>
The purpose of this is to switch between the desktop and mobile version of the site when the appropriate browser is detected. My problem is that my HTC Hero Android browser is not displaying the mobile version of the site, and is instead displaying only the desktop version. My browser is set to display the mobile version of a site where possible. What am I doing wrong here?
PS. The mobile site is only a tech demo for my coursework, and so it only needs to be viewable in my browser to show that there is a mobile version of the site (it's my CSS that's being evaluated).
handheld is used to attach CSS file
for mobile devices, but it isn't used
by Android and iPhone.
source : http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/
So you can use something like the following:
<link rel="stylesheet" href="css/style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" />
<link rel="stylesheet" href="css/mobile.css" media="handheld" type="text/css" />
According to this page, Android’s browser doesn’t load stylesheets marked as media="handheld".
The code from my question on iPhone stylesheets should work for Android (although I haven’t tried it): How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?
History: the handheld media type was invented and used before Apple released the iPhone, and its version of Safari. (Android, if I understand correctly, effectively uses the same rendering engine for its browser as Mobile Safari does.) The whole idea of Mobile Safari was that it rendered the internet like you’d see it on a desktop. If it had used handheld stylesheets, it would have been stuck with a very simplified look for websites that included them, as handheld stylesheets were targeted at old, really simple phone web browsers.
I'm no expert in the topic, but my guess is that your phone uses a modern browser that acts like a desktop one, and chooses the wrong stylesheet.
A server-side script could easily determine the proper file depending on the User-Agent, but it may not be feasible in your scenario. It'd definitely save you hours of headache.
The easiest way I have found is to use simple device detection, I found a good article and code at http://mobiforge.com/developing/story/lightweight-device-detection-php.
The code they give is as follows
<?php
$mobile_browser = '0';
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda','xda-');
if(in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}
if($mobile_browser>0) {
// do something
}
else {
// do something else
}
?>
Then just include your css in the if statement at the bottom.
I played around with this as well and it didn't work. After searching on Google it appears media="handheld" is not supported everywhere or by every mobile.
But here you have a premium class that will help you out if you use PHP: http://codecanyon.net/item/php-mobile-phone-detection/98397
Just use this meta tag in your head section among the first tags.
meta name="viewport" content="width=device-width, initial-scale=1"