The Best Cyprus Community

Skip to content


Browser bugs with screen size constants

Anything related to the Internet, computers and technology in general.
Post a reply

Browser bugs with screen size constants

Postby Get Real! » Sat Nov 03, 2012 2:00 am

Browser bugs with Javascript screen size constants

Test script follows...

-------------------------------------------------------------------------------------
<!DOCTYPE html>
<body><script>

document.write('NB: These are CASE SENSITIVE constants!'+'<br><br>');

document.write('screen.width : '+screen.width+'<br>');
document.write('screen.height : '+screen.height+'<br><br>');

document.write('screen.availWidth : '+screen.availWidth+'<br>');
document.write('screen.availHeight : '+screen.availHeight+'<br><br>');

document.write('window.innerWidth : '+window.innerWidth+'<br>');
document.write('window.innerHeight : '+window.innerHeight+'<br><br>');

document.write('window.outerWidth : '+window.outerWidth+'<br>');
document.write('window.outerHeight : '+window.outerHeight);

</script></body>
-------------------------------------------------------------------------------------


Test results:

-------------------------------------------
Under Maxthon3 my screen returned:

screen.width : 1024
screen.height : 768

screen.availWidth : 1024
screen.availHeight : 738

window.innerWidth : 1024
window.innerHeight : 626

window.outerWidth : 1016 <--Smaller than 1024 makes no sense!
window.outerHeight : 730

--------------------------------------------
Under Firefox 16 my screen returned:

screen.width : 1024
screen.height : 768

screen.availWidth : 1024
screen.availHeight : 738

window.innerWidth : 1024
window.innerHeight : 605

window.outerWidth : 1032 <--Should be 1024
window.outerHeight : 746

-------------------------------------------
Under Sea Monkey my screen returned:

screen.width : 1024
screen.height : 768

screen.availWidth : 1024
screen.availHeight : 738

window.innerWidth : 1024
window.innerHeight : 591

window.outerWidth : 1032 <--Should be 1024
window.outerHeight : 746

-------------------------------------------
Under IE6 (forget it!) only the first 4 are supported.
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 48333
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia
Top

Re: Browser bugs with screen size constants

Postby kurupetos » Sat Nov 03, 2012 2:15 am

GR! have you ever compared 64bit and 32bit browsers?
User avatar
kurupetos
Leading Contributor
Leading Contributor
 
Posts: 18855
Joined: Tue Jul 31, 2007 7:46 pm
Location: Cyprus
Top

Re: Browser bugs with screen size constants

Postby Get Real! » Sat Nov 03, 2012 2:24 am

kurupetos wrote:GR! have you ever compared 64bit and 32bit browsers?

It shouldn't make any difference to Browser output because "32bit" and "64bit" are “memory addressing modes”.

In other words it affects how a computer places and retrieves instructions and data in system memory which is relevant to the architecture of a computer system, but its nothing to do with Browsers... although there is an old wife's tale that 64bit is faster but that's not necessarily so because computing is a lot more complicated than that.
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 48333
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia
Top

Re: Browser bugs with screen size constants

Postby Get Real! » Sat Nov 03, 2012 2:29 am

More explanation…

It’s true that WIDER data paths (64bit) are faster than narrower ones (32bit) but the (Assembly) instructions to access the wider paths gets bigger and more complicated which in turn cancels out the speed advantage.
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 48333
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia
Top

Re: Browser bugs with screen size constants

Postby Me Ed » Sat Nov 03, 2012 10:34 am

That's why you should use jquery for cross-browser compatability:

Code: Select all
<!DOCTYPE html>
<head>
<title>Local Housing Allowance (LHA) Map | StockportDistrict</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<script>

          document.write('NB: These are CASE SENSITIVE constants!' + '<br><br>');

          document.write('screen.width : ' + screen.width + '<br>');
          document.write('screen.height : ' + screen.height + '<br>');

          document.write('screen.availWidth : ' + screen.availWidth + '<br>');
          document.write('screen.availHeight : ' + screen.availHeight + '<br><br>');

          document.write('normal window.innerWidth : ' + window.innerWidth + '<br>');
          document.write('jquery window.innerWidth : ' + $(window).innerWidth() + '<br>');

          document.write('normal window.innerHeight : ' + window.innerHeight + '<br>');
          document.write('jquery window.innerHeight : ' + $(window).innerHeight() + '<br><br>');

          document.write('normal window.outerWidth : ' + window.outerWidth + '<br>');
          document.write('jquery window.outerWidth : ' + $(window).outerWidth() + '<br>');

          document.write('normal window.outerHeight : ' + window.outerHeight + '<br>');
          document.write('jquery window.outerHeight : ' + $(window).outerHeight() + '<br>');

</script>
</body>
User avatar
Me Ed
Regular Contributor
Regular Contributor
 
Posts: 1787
Joined: Thu Apr 30, 2009 9:24 pm
Location: The United Kingdom of Great Britain and Northern Ireland
Top

Re: Browser bugs with screen size constants

Postby Get Real! » Sat Nov 03, 2012 12:18 pm

Thanks for the script Me Ed!

I’m getting this output…

NB: These are CASE SENSITIVE constants!

screen.width : 1600
screen.height : 900
screen.availWidth : 1600
screen.availHeight : 870

normal window.innerWidth : 1600


…and a “Failed to load resource” error so I suppose this library was inaccessible to the script.


NB: I changed screen on this machine so don’t be shocked by the discrepancies! :lol:
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 48333
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia
Top

Re: Browser bugs with screen size constants

Postby Get Real! » Sat Nov 03, 2012 12:24 pm

NB: These are CASE SENSITIVE constants!

screen.width : 1600
screen.height : 900

screen.availWidth : 1600
screen.availHeight : 870

window.innerWidth : 1600
window.innerHeight : 758

window.outerWidth : 1592 <----Still getting the bug under maxthon.
window.outerHeight : 862

8 pixels gone missing! :lol:
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 48333
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia
Top

Re: Browser bugs with screen size constants

Postby Sotos » Sat Nov 03, 2012 3:32 pm

Get Real! wrote:…and a “Failed to load resource” error so I suppose this library was inaccessible to the script.


Do you have jQuery? If you don't then how would your script find it? ;) I don't have Maxthon to test your script but to load JQuery replace this line:

Code: Select all
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


with this:

Code: Select all
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
User avatar
Sotos
Leading Contributor
Leading Contributor
 
Posts: 11357
Joined: Wed Aug 17, 2005 2:50 am
Top

Re: Browser bugs with screen size constants

Postby Get Real! » Sat Nov 03, 2012 5:12 pm

I wouldn’t want to draw attention to the source of this library Sotos… :lol:

But no, I don't do jquery and hopefully never will as I’ve got enough languages to juggle with already without introducing another!
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 48333
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia
Top

Re: Browser bugs with screen size constants

Postby Sotos » Sat Nov 03, 2012 6:01 pm

Do you know Javascript? I am not talking about just copy/paste scripts from the internet. Jquery is not exactly a new language. It is a javascript library that makes writing js code much easier and takes care of most differences between browsers. If you are a Javascript expert then you don't need Jquery. Otherwise learning Jquery is the easiest way to write JS code. Jquery is very easy to learn if you know CSS and some basics of Javascript. Here is a nice free intro course: http://www.codeschool.com/courses/jquer ... rst-flight
User avatar
Sotos
Leading Contributor
Leading Contributor
 
Posts: 11357
Joined: Wed Aug 17, 2005 2:50 am
Top
Next
Post a reply

Return to Internet, Computers and Technology

Who is online

Users browsing this forum: No registered users and 0 guests

cron
© 2002 - 2015 Cyprus-Forum.com
powered by phpbb
Cyprus Forum RSS Feed Cyprus Forum Atom Feed