I'm coding a website essentially for three different breakpoints (desktop, tablet, mobile). I have a javascript plugin running an automatic image change for my full width background. As I resize my window to the tablet and mobile breakpoints, can I disable the javascript plug in and make it stop running when the window is smaller than ***px?
var minWidth = 800 // minimum width of screen
if ($(window).width() <= minSize) {
// do nothing
}
else {
// continue script
}
If you wanted it to be width as well as height:
if ($(window).width() <= minWidth && $(window).height() <= minHeight) {
Or something similar.
I'm trying to read the window size with javascript and this works fine for every platform I have tested except Android. I'm resizing div's based on this number so every div would fill the screen. On android, the first page looks fine,but as soon als you scroll down it looks like the height was mesured without the height of the address-bar. So I end up with pages that are 50px short, showing the next page already.
This is the code i'm using to get the height & width of the platform:
app.tab1.sections.fitScreen = function(){
var w = $(window).outerWidth(),
h = $(window).outerHeight();
//Fit all page-containers
$('#tab1 .page-container').width(w).height( h );
//Fit the first one(includes the header)
$('#tab1 #page_1').height( h - ( $('#p-header').outerHeight() + $('#product-navigation').outerHeight() ) );
}
This screenshot illustrates the issue:
http://www.imgjoe.com/x/export03.png
I'm working on a web app that is targeted to browsers on desktop, tablet and smartphone.
The web app has a light box implemented using Colorbox with an iframe. When the browser window is resized or the tablet/phone has it's orientation changed, Javascript code queries the window dimensions so that it can resize some elements of the light box.
The issue I'm having is that everything works fine on desktop (Windows: IE, Firefox, Chrome, Mac: Safari), iPad & iPhone but not on the Android smartphone (HTC) and Android Emulator.
Android always returns different values for screen.width, screen.height, window.innerWidth & window.innerHeight when they're queried from inside the window's resize event, which fires multiple times.
Why is the Android browser returning such a wide variance in values and how can I reliably detect the width and height of the browser window?
On Android, window.outerWidth and window.outerHeight are reliably the screen size. Depending on your version of Android, innerWidth/Height is usually incorrect.
Here's a really good writeup on the situation.
Below is differentiation based on readings with Samsung Tab running Android 4.1
screen.height - gives actual device height including task bar and
title bar
window.innerHeight - gives the height excluding task bar, title bar
and address bar(if visible)
window.outerHeight - gives the height excluding task bar and title
bar height, (no matter address bar is visible or hidden, outerHeight
include the address bar height.)
I took me hours to find a workaround.
The only constant among window.innerHeight, window.outerheight, etc was screen.height.
This code gave me the outerheight:
screen.height / window.devicePixelRatio - window.screenTop
Also, in order to support older versions of android, place your code in a setTimeout
I hope this is helpful =)
I'm using this to make it work between ios and android.
var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;
Try this, and check your mobile reading
<script>
var total_height=screen.height*window.devicePixelRatio;
alert(total_height);
</script>
It should match the screen size (height) of your phone specifications.
var throttle = (function () {
var timer;
return function (fn, delay) {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
})(),
var callback = function (w, h) {
alert(w + ' ' + h);
}
window.onresize = throttle(function () {
width = Math.min(window.innerWidth, window.outerWidth);
height = Math.min(window.innerHeight, window.outerHeight);
callback(width, height);
}, 60);
Dan's answer fix the inconcistancy between android's browser..
so I post how I detect/change mobile viewport and adapt it when rotated
(don't know if usable for any one...
var lastorg=0; //set the begining of script
thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation
if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0 )){ //is start or change
$("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device
mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan's way to fix the inconsistancy
myheight = Math.min(window.innerHeight, window.outerHeight);
lastorg=thisorg; //update the lastorg
wr=parseInt(mywidth)/1280; // the minimum desire width
hr=parseInt(myheight)/630; // the minimum desire height
if(hr<wr){
vscale=hr;
if(hr<1){ // if it if small screen, so desktop pc wouldn't change
windowHeight=630;
windowwidth=mywidth/hr;
}
}else{
vscale=wr;
if(wr<1){
windowwidth=1280;
windowHeight=myheight/wr;
}
}
$("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window
if(thisorg>1){
$("#pro").fadeOut(500);
}else{
$("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate
}
}
In my case, the setTimeout hook was not useful.
After some digging, I discover that different Android versions (and devices) have different devicePixelRatio values.
If the devicePixelRatio is equal or greater than 1, the actual number of pixels in the screen (for the html page point of view) is given by window.screen.width (or ...height).
But, if the window.screen.width is less than 1 (it happens in some old Android devices), the actual number of pixels becomes: window.screen.width/devicePixelRatio.
So, you just have to cope with this.
w = window.screen.width;
h = window.screen.height;
if(window.devicePixelRatio < 1){
w = window.screen.width/window.devicePixelRatio;
h = window.screen.height/window.devicePixelRatio;
}
i used screen.width to get the width of the browser. it worked fine with iphone safari but didn't work in android phone(it showed 800 width for android browser).
Is there any compatible way to get the screen width. I dont want to use UserAgent to check if its mobile browser. would like to use a javascript for that and logic should include screen width.
It's know issue - see here
When page first loads the screen.width and screen.height are wrong.
Try a timeout like this:
setTimeout(CheckResolution, 300);
Where CheckResolution is your function.
You may try this url for detect screen size and apply a CSS style
or
<script type="text/javascript">
function getWidth()
{
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.innerWidth != null)
xWidth = window.innerWidth;
if(document.body != null)
xWidth = document.body.clientWidth;
return xWidth;
}
function getHeight() {
xHeight = null;
if(window.screen != null)
xHeight = window.screen.availHeight;
if(window.innerHeight != null)
xHeight = window.innerHeight;
if(document.body != null)
xHeight = document.body.clientHeight;
return xHeight;
}
</script>
screen.height shows the height of the screen
screen.width shows the width of the screen
screen.availHeight shows height but removes the interface height like taskbar, and browser menu etc.
screen.availWidth same as above,instead gives available width
For those interested in getting the width values of the browser, I tested several options:
I am using bootstrap 3 and the ONLY solution matching the bootstrap 3 breakpoints with both IE and Chrome was :
window.innerWidth
Here are the results with 1200px window with:
Chrome
$( window ).width(): 1183
$( document ).width():1183
screen.width: 1536
$( window ).innerWidth():1183
$( document ).innerWidth():1183
window.innerWidth: 1200
$( document ).outerWidth():1183
window.outerWidth: 1216
document.documentElement.clientWidth: 1183
Internet Explorer 10
$( window ).width(): 1200
$( document ).width():1200
screen.width: 1536
$( window ).innerWidth():1200
$( document ).innerWidth():1200
window.innerWidth: 1200
$( document ).outerWidth():1200
window.outerWidth: 1214
document.documentElement.clientWidth: 1200
Just read these two URLs. It should help you get what you need.
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
http://www.quirksmode.org/mobile/tableViewport.html
FYI, the Android probably is 800px wide. See this article among others:
Understanding Samsung Galaxy Tab screen density
Edit: Oh, I think the other guy was righter than me that pointed to the Android bug.
I find that using window.outerWidth gives the correct value. Tested this using BrowserStack android emulators.
I am currently re-sizing a DIV class based on the users window size / resolution - I tested it and once I re-size my browser window to below 1024 x 768 the css attribute changes properly. The problem is now, when I maximize the window the attribute stays with the new properties (400 / 380). Is there a way to have it reset once my resolution goes back to over 1024 x 768?
$(function(){
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
$("#scrollbar1").css('height',(h < 1024 || w < 768) ? 400 : 380);
});
});
Some advice would be appreciated, thank you.
Assuming your screen-resolution is height:768 * width:1024 :
First see the comment by https://stackoverflow.com/users/222714/mdmullinax , you currently detect if the width is < 768 or height is < 1024 , you should switch this.
Then: you cant rely on the fact that a maximized browser-window will have a inner size similar to the screen-size.
width()/height() will return the size of the viewport, so when the window is maximized there still may be some bars on the desktop (and the browsers bars like toolbar, adressbar etc. too) that let the browser-windows size differ from the screen-size)