CSS, change stylesheet if mobile device - javascript

I'am having trouble changing CSS file paths if the end user is accessing my site via a PC or mobile device, below is my CSS, I thought that it would redirect the user if using any handheld device:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="handheld" />
Please can someone let me know if this is the correct way or should I be using javascript to manipulate my file path>

Dont make life too hard on yourself going that route of detecting a browser and device type..
Go with Media Queries..
#media only screen and (max-device-width: 480px)
All devices are now all well known but regardless the resolution will determine the css style you offer the client..
A Lot more can be found here : MediaQueries
I would suggest MAYBE bootstrap3 framework // foundation etc there are a lot to choose from but these are the top two which come with built in definitions and a good framework to write css for each!
What you want to focus on is the grid system..
such as Bootstrap They work of a col-size-n grid of 12 colums, responsive.
A Lot more documentation can be found there and it opens a world of other questions!
:)

Well, the proper way would be Media Queries.
As mentioned by another individual on your question, if your truly trying to utilize Javascript:
function Resize() {
width = window.innerWidth;
height = window.innerHeight;
if(width < 1200 && height < 600) {
// Modify particular Stylesheet elements.
}
}
Obviously you can do measurement / comparison:
Browser Inner Width / Height
User Agent
Those are two examples, but really Media Queries would be ideal and proper. Won't go into detail on those Media Queries, since someone went into more detail.

Related

Responsive web design by using css or javascript?

I am going to make a website that is using responsive design. I read some information about css media query. What I wanna do is that the layout of my webpage should looks difference by using different devices (like PC, tablets or smartphones).
If I use media query to determine the device by using the width of the screen (in pixel), I always worry about if there will be a new device using a extremely high ppi screen. That device may threat as tablet or something like PC?
Another solution that is using the user agent to determine the device category by using userAgent. There's also a problem is that if the device not interpret the javascript fine then the page maybe broken.
Any great solution that can solve my worries above? Or Which solution is better?
Or I misunderstand the method of using media query?
Thank you.
CSS is the way to go, and you can always provide fallback for browsers that don't support media queries using a js plugin like css3mediaqueries.js, but relying on JS solely to make your website responsive is a risk because you can't tell for sure if the user will have Javascript enabled, and when it's not enabled it's not going to be responsive anymore.
Also, it's considered best practice now to use em values for media queries instead of pixels to make sure your website always scales right. More on this topic in this article.
Another tip is that you determine the media query values according to your content's best break points instead of device dimensions, that way you also make sure your content will always look right no matter how many new devices are made.
Hope that helped :)
id' personally use CSS and set min-width and max-width. Most responsive designs now days use CSS. This way if there is a new device on the market it will just adjust according to it's screen size.
#media screen and (max-width:480px) { }
#media screen and (min-width:481px) { ) etc... etccc....
I prefer use media queries in CSS.
Just write the queries after the default CSS...
#media screen and (max-width: 600px) { write here only the elements that must change de code for responsive performance }
.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}
#media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}
Don't forget to insert the viewport code into the head/HTML.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
I prefer Twtitter Bootstrap over using CSS3 media queries for such various devices.
Try jRWD, a JavaScript-only module I designed recently. It uses 12 lines of pure JavaScript and 2 small helper functions. It's available on GitHub, at https://github.com/BlackMagic/jRWD.
If you want to see jRWD in action, visit http://ieee-qld.org. Make sure you inspect the source code. Minimal JavaScript, minimal CSS stylesheet. No jQuery either.

mobile version of website doesn't fit horizontally

I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)

Responsive CSS with high-res smart phones and tablets

I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance
The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.
You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}
You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta

JavaScript test if a CSS stylesheet is applied with CSS3 media query

I have two style sheets:
<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />
The second one should only be loaded when the window is 800px or wider (narrower displays get a layout more appropriate for mobile devices).
The JavaScript needs to know if that second style sheet is being applied, I have tried the jQuery:
($(window).width() > 800)
But when you get around the 790 - 810px width, Chrome/Firefox (and probably others) will return a value such as 791, and the 800px+ style sheet will still be loaded.
I suspect it's due to the scroll bar (but targeting the $(document) or $('html') either doesn't work, or are the same).
So is there a way to test if $('#css-desktop') is enabled/active/used?
You can do the following.
Make a div which has a display: none; in the first stylesheet, so it is not shown.
In the second stylesheet you will add a position: absolute
In your Javascript you check if( $("#thediv").css("position") == "absolute")
The position: absolute; is only applied in the second stylesheet.
You could try
window.matchMedia(document.getElementById('css-desktop').getAttribute('media')).matches;
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Here is an example as to how you can try to detect the "real" width of the browser window: detect window width and compensate for scrollbars - Javascript
There is a problem with what you are attempting.
If a user is browsing the page while resizing the window below 800px in width then, he will get the mobile version of the page and later when he/she maximizes, he will still get the mobile version.
So, relying on screen width are not a reliable method as the screen resolution of the mobiles are growing significantly nowadays.
Your best shot is to read the User Agent information of the browser, which will easily reveal whether it is a mobile browser or other and load the css files according to it. Then for the variable screen resolution, you can use your current techniques to load width specific codes.

Creating a webpage for mobile browsers

I'm creating a website for mobile users as well as for pc users. I want this website to be viewed properly on both these end users. I'm now basically looking into the part of mobile users. When i load the page on my mobile, it seems to be a way too bit smaller. I need to reduce the whole body size of the page or its resolution to fit the mobile.
When i checked the mobile version of google(here), it seems to be smaller in the pc's browser, where as it fits the mobile browser.
What is the method i've to use???I'm using Xhtml with support of javascript and css to build the website
You can easily specify multiple style sheets for different media types:
<link rel="stylesheet" type="text/css" media="handheld" href="foo_mobile.css">
<link rel="stylesheet" type="text/css" media="screen" href="foo_screen.css">
The relevant media types here are probably screen for normal viewing at a computer and handheld.
You can also specify a style sheet with media='all' and then apply specific styles depending on the media type in other style sheets if you don't need to re-style everything.
Consider specifying sizes in relative units like % and em. This way everything scales relative to available screen size. This is a good idea anyway since (without JS) you can't know how big the users browser window is. Use min-width if you want to prevent things (namely fonts) getting too small.
The only real issue with this approach is images, since they look best at their natural sizes. SVG gets around this issue for vector art but using CSS media targets as stated by Johannes can resolve this for mobile as well.

Categories

Resources