I'm looking at creating a responsive framework for my website - its a first for me. No fancy stuff just responsive through mobile -> tablet -> desktop.
I'm happy with how media queries work, however adding classes through javascript seems like another viable option.
It would be easy to do something like this:
function queryViewport() {
var $window = $(window);
var $body = $("body");
var windowWidth = $window.width();
var windowHeight = $window.height();
// Query window sizes to determine whether device is to be
// classified as a small mobile device or a larger tablet/
// desktop device.
var isMobile = windowWidth < 600 || windowHeight < 600;
$body.toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile);
// Calculate whether viewport is portrait or landscape
var isPortrait = windowHeight > windowWidth;
$body.toggleClass("portrait", isPortrait).toggleClass("landscape", !isPortrait);
}
However, I'm not an expert in this area - am I missing something or is it really that simple?
All advice appreciated.
you can use this minified jQuery snippet to detect if your user is
viewing using a mobile device. If you need to test for a specific
device I’ve included a collection of JavaScript snippets below which
can be used to detect various mobile handheld devices such as iPad,
iPhone, iPod, iDevice, Andriod, Blackberry, WebOs and Windows Phone.
if(jQuery.browser.mobile)
{
console.log("You are using a mobile device!");
}
else
{
console.log("You are not using a mobile device!");
}
See more DETECT MOBILE DEVICES USING JQUERY
See the link below to understand the difference
What is better: CSS media queries or JQuery mobile?
I would suggest media queries, as all future amends can be done in the CSS without adding more and more logic to a separate JS file for new breakpoints.
Additionally, the CSS solution is supported down to IE9+ and there are JS polyfills (Respond) for backwards compatibility. Basically it's just built in to CSS and works well. There seems little point of rewriting the same logic in javascript, having a new class for every new size.
On top of this, media queries allow you to target CSS as different media types such as print, or if you want to use height-based media queries or target retina displays you can do this without having to add new classes. As a rule the convention is to use media queries with JS fallbacks and I see no reason to suggest otherwise.
JS produces different results for detecting viewport heights and widths depending on how you get them:
In that case, you could get screen width using window.outerWidth, window.innerWidth, document.documentElement.clientWidth. All these produce different results, but the second will give you values identical to CSS #media breakpoint.
$(window).width() too, is different from #media breakpoint.
I depends on browser differences, e.g. if the take in account the vertical scrollbar or not. Better go with CSS.
Related
I'm trying to get rid of Modernizr in my project but I can't seem to understand or find a replacement for the .mq function. Can someone explain or provide a bare solution to my problem?
According to the Modernizr docs, mq checks whether the page current matches a media query you pass it, e.g. if (Modernizr.mq('(min-width: 900px)')) to test if the window is at least 900px wide.
On vaguely-modern browsers (IE10+, details here), you can use window.matchMedia to do that. Example from that page:
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
Modernizr is open source - you can see exactly what it does here.
In modern browsers, it will almost always just be window.matchMedia
I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window object.
I want to do the detection in pure JavaScript to get started. Can I use this property across all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.
I don't care about the view port changing due to re-sizing etc. Just the actual size of the screen which does not change.
I was hoping there was a single property I could check across devices and browsers.
Here is some general info by wikipedia on responsive web design.
Take a look at Get the device width in javascript
Media Queries work in js too:
if (window.matchMedia('screen and (max-width: 768px)').matches) {}
Another way would be:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
screen.width is the property your are looking for.
This is what worked for me after long hunch.
These attributes below provide responsive sizes based on new tab size.
window.innerWidth
window.innerHeight
While waiting for responsive design to find the way into a legacy web site, I would like to redirect a browser to a mobile version if the screen is smaller than 480px
Hunting around I came up with
var isSmall = window.matchMedia ?
window.matchMedia("screen and (max-width: 480px)") :
screen.width<=480;
Question
Is this acceptable in 2014 or is there a better/safer/newer method to do what I want without using useragent sniffing?
References
MDN Window.matchMedia
JavaScriptKit CSS media query matching in JavaScript using window.matchMedia()
QuirksMode screen.width is useless (hence the addition of matchMedia)
You could use a polyfill such as https://github.com/paulirish/matchMedia.js/
you can use bootstrap http://getbootstrap.com/ or
foundation http://foundation.zurb.com/
these two frameworks has a powerful multi device layouts.
Yes there is lot of tricky ways :) to choose windows width but our Team's view you didn't have to include any tricks to know just windows.width because jQuery has a .width() function like:
var window_width = $(window).width();
if( window_width <= 480 ){
console.log(window_width);
}
Iphone 4S, Iphone 5, Iphone 5S Every one's Screen Width is 320px. Your Mobile Resolution isn't your mobile's Screen Width. so when you include your tricks to know just windows width or something you just increase your Application's loadspeed this gonna be a problem for your user. But you know that was the designer's issue why they complicate the designs for developers & for End Users. :)
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
So I have an app I made using phone gap as a wrapper and targeted at specifically iPad. Now I want to incorporate an iPhone version of the app but have it so that its all complied together in one app. So I guess what my question is, does phone gap allow for device specific layouts and let you use JavaScript to detect this?
Yes, but the fastest way is probably to get the screen size of the device and start from there:
var widthScreen = window.innerWidth;
var heightScreen = window.innerHeight;
According to the size you get you can safely assume if you're working on iPads vs. iPhone5 vs. iPhone4 and make your changes.