Homec4science

Add "device" JS/CSS for reactive stuff

Authored by epriestley <git@epriestley.com> on Jul 25 2012, 20:51.

Description

Add "device" JS/CSS for reactive stuff

Summary:
As we work through @chad's redesign, one thing I want to do is improve the tablet/mobile experience.

Add a "device" behavior which sets a "device-phone", "device-tablet" or "device-desktop" class on the root div. The behavior (device names, width triggers) is mostly based on Bootstrap.

Also adds a preview viewport=meta tag, which makes the iPhone not scale the page like crazy and is a desirable end state, but currently makes the app less usable since things get cut off.

Test Plan:
Added some classes like this:

.device-desktop {

	  background: blue;

}
.device-tablet {

	  background: orange;

}
.device-phone {

	  background: yellow;

}

...and loaded the site on a desktop, iPad and iPhone. Resized the window. Got the right background color in all cases.

Reviewers: btrahan, chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D3063

Details

Committed
epriestley <git@epriestley.com>Jul 25 2012, 20:51
Pushed
aubortJan 31 2017, 17:16
Parents
rPH1fc2dfd54baf: Load reviewer stats
Branches
Unknown
Tags
Unknown

Event Timeline

epriestley <git@epriestley.com> committed rPH59949bf81150: Add "device" JS/CSS for reactive stuff (authored by epriestley <git@epriestley.com>).Jul 25 2012, 20:51