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
Related
I was working a with a site and I had know the width of the screen that's why I tried with screen.width but I don't know why I'm getting different result on Firefox and Chrome. Seems Firefox showing me the correct value but Chrome doesn't.
Is there is anyone who can assist me to know whats the reason?
Thanks
The reason is that there is no current standard that defines what the value should be. The closest is the CSSOM View Module, which states that:
The width attribute must return the width of the output device, in CSS pixels.
However, that specification is a Working Draft, which means it is a work in progress and the definition stated may not be what is implemented. Indeed, the Editor's Draft gives two different definitions:
The Web-exposed screen area is one of the following:
The area of the output device, in CSS pixels.
The area of the viewport, in CSS pixels.
So obviously, browser vendors are taking whichever definition they want.
For more discussion on that property, see PPK's rant "screen.width is useless" on Quirks Mode
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.
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 running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.
Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I'm looking for a non-jquery solution to add a persistent footer overlay to my mobile site. It is similar to a popup ad that is on top of content but anchored to the bottom of the page.
I've been using a javascript approach to this:
window.addEventListener(
'scroll',
function() {
//if scrolled and offsets are the same (iphone)
if(_self.initOffsetY == window.pageYOffset)
{
document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight+"px";
}
else
{
document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight - window.pageYOffset+"px";
}
},
false
);
where initPage Height is the initial page height and initOffsetY is the initial offset of the page. This takes care of the case with the browser menu bar.
But it doesn't really work too well on android. The positioning is off. Can someone explain why? Thanks
You should probably use either of these standalone scrolling helpers:
http://joehewitt.github.com/scrollability/
or http://cubiq.org/iscroll
Wouldn't it be better to have two separate elements, a main wrapper and a footer div perhaps, and enable scrolling in just the wrapper (overflow:auto;)? This would avoid most browser inconsistencies, or even cases where JS is turned off.
There's a drawback though. You will need to program a method for scrolling inner elements for some mobile devices. There are libraries for this (gasp!), but frankly it isn't too hard to program yourself (as I've done with my site).
If you're attached to this approach of floating an element to where you want it / approximating position:fixed, you're going to have a number of things to check, one being html code that you've got to make sure there aren't any margins or padding interfering with the above script. The quick hack solution would be to just measure the heigh difference and calibrate your script according to that. The number you get from the calibration might be helpful in determining the source of the problem. There are probably some additional tricks to make this work smoothly, but I would go with a library thats being used already, and it looks like there are a number of them: http://bradfrostweb.com/blog/mobile/fixed-position/
btw - the iscroll4 library will fix the scrolling issue with overflow:auto on ios < 5, android < 4