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) { }