NYCPHP Meetup

[Gary Mort]

I was mucking about with Canary and discovered a cool feature.  You can 
fake your resolution setting.  I'm not talking about the pseudo-faking 
that a number of extensions provide - but true faking.

For those of you unfamiliar with Canary, Google releases their browser, 
Chrome, in a number of different "flavors".
http://www.chromium.org/getting-involved/dev-channel

There is the Stable, Beta, and Dev 'channels' - which will all install 
in the same file directory - so you can only have one of these channels 
installed without going to great lengths to setup multiple copies of chrome.

But they also have a special 'channel' - Canary.  Canary is the bleeding 
edge of Chrome - so the installer for Canary installs in a separate 
directory with a completely separate profile - so you can run the 
bleeding edge and a more stable version side by side.

So, after you install Canary, go and load a website your working on.  
For testing, I recommend http://www.screenresolution.org/
http://www.webpagescreenshot.info/img/868607-48201264529PM
Then open the developer tools[CTR+SHIFT+I]

Down at the lower right hand corner of the screen will be a gear icon.  
Click the gear icon and up pops a bunch of settings.    Under user 
agent, select "override device metrics" and enter a new resolution size.

RELOAD the page.  http://www.webpagescreenshot.info/img/733559-48201264805PM

As you can see from my snapshot, the first time the web server thought 
my screen was 1680 x 1050
The second time, it thought my resolution was 1024by768


Using the various extensions to set screen resolution, it never actually 
changes the device metrics sent to the server - it changes my screen 
size.  This is an important difference because a wide number of web 
servers have separate css style sheets based on screen size - or they 
use 100% widths which use the underlying device resolution, not the size 
of the window.

Pisses me off to no end because sites like Facebook stick some popup 
stuff at the FAR right of the "screen", so if I try to run my browser in 
only 768 pixels of the screen, I have to scroll right to get to the 
logon/logoff buttons.

By FORCING everything to think my width is smaller, sizes actually 
render correctly.  It also allows you to do better mobile website 
comparisons as you can set your resolution down to what is actually 
shown on a smart phone and see what it will look like AT THAT SIZE.   
Combine that with the user agent override and you can do a lot of 
'mobile website' testing right from chrome.