How to load CSS just in mobile view?
The best way is to include the css file irrespective of whether a device is a mobile device or desktop device and then using media queries in the css file which works for mobile and desktop devices.
but if you still need the answer then there are two major methods to do this:
CSS WAY
Use the media
property of link tag: (Remember this always loads the css but activates it only on screens having max width as 960px)
<link rel="stylesheet" href="style.css" media="only screen and (max-width: 960px)">
JAVASCRIPT WAY
Use a function to determine if a device is a mobile device and if yes then apply the css:
function isMobile(){
return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4)))
}
if(isMobile)
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
Screen and Mobile Stylesheets
According to documents, syntax of loading another file in specific device/condition is like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
This will load only one css file for every single amount of width
For iPhone 4 and new generation iPod touch that have Retina display there is something that you should note. iPhone 4 width is 640
pixels that many developers don't count this width as a mobile browser width. If you add this below meta tag in your document problem will be solved
<meta name="viewport" content="width=320">
This meta tag will impact your images quality. If you want to fix that problem then you need to read about this here.
On desktop PC, mobile css loads first, then it switches to the desktop version
There are few approach you can use
1st Approach by using CSS File
<link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">
2nd by using Javascript
if (window.matchMedia('screen and (min-width: 600px)')){
document.write('<link rel="stylesheet"
href="small.css">');
}
I suggest for better one you need use only one css file and define the concept like as below :
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Different stylesheet for different device
You can use these:
// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
Force mobile CSS on desktop
Most popular browsers offer built-in user agent switchers, and also you can find extensions
Chrome: Developer Tools --> click the phone icon in the top left corner of the console's window.
IE and Edge: press F12 --> Emulation
Safari: Preferences --> Advanced --> click the box next to “Show Develop menu in menu bar”. new “Develop” menu will show up select “User Agent”
Firefox: there is an extension called User Agent Switcher for Firefox
Related Topics
Css: How to Target ::Slotted Siblings in Shadow Dom Root
Web Design for Smart Phone - Pixel Size
Adding CSS Stylesheet to Pages Based on Route in Opencart
Make Div 100% of Grandparent Container
Align Block Elements on Top When Using Line-Height
Css: How to Center a Horizontal List? Display:Inline Not Working
Long Pages in Firefox Offset When Scrollbar Appears
Pure CSS Drop Down Menu - Unable to Keep Top <Li> Highlighted When Hovering Over Sub-Menu
Rails Images and Assets Not Being Loaded Properly
How to Make Placeholder and Label Transitions
Ie Doesn't Support Height=Auto for Images, What Should I Use
Max-Height: X% Doesn't Work on Chrome
VS Code SCSS Auto Compiling to CSS
What Is the Rule Behind "CSS 256 Classes Override One Id"
Is It Valid to Assign a Value Twice to the Same Property Within One Rule
Change Colour of Pickerinput Items in Shiny
Evenly-Spaced Navigation Links That Take Up Entire Width of Ul in CSS3