British Columbia, Student Aid | Examples | Responsive Web Design

British Columbia, Student Aid

View British Columbia, Student Aid

NEED TO ADD SELECT NAV.js to the list of resources SelectNav.js

They’ve added the fix for the iOS orientation bug.

/*Fixes iOS scaling when switching from portrait to landscape */
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false); }}

They have also included these two meta elements that are not seen too often.

<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />

What do they do? Well that’s a great questions, so we answered it for you.

British Columbia, Student Aid Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Media Queries

@media only screen and (max-width: 767px) { }
@media only screen and (max-width: 767px) { }
@media only screen and (min-width: 768px) and (max-width:983px) { }
@media handheld, only screen and (max-width: 767px) { }
@media only screen and (max-width: 1280px) and (min-width: 768px) { }
@media only screen and (max-width: 767px) { }
@media only screen and (max-width: 767px) { }

@media only screen and (min-width: 768px) { }
@media only screen and (min-width: 768px) and (max-width:983px) { }
@media only screen and (-webkit-min-device-pixel-ratio: 2) { }
@media only screen and (max-width: 767px) { }
@media only screen and (max-width: 320px) { }
@media only screen and (min-width: 321px) and (max-width: 480px) { }

Plugins used on British Columbia, Student Aid

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.