Responsive Design Viewport Initial Scale Tutorial
The recent Responsive Design Viewport Width Considerations Tutorial was a Responsive Design improvement step for our Landing Page series of HTML/Javascript/CSS webpages at RJM Programming, but what it addressed was “what not to do”.
Today, it is more the case, with mobile devices less than 700px wide, viewport wise, what is a “good step to do”?
In really simple terms it is getting the head around …
- treating the meta tag viewport (within the head tag of a webpage) like a lot of other HTML tags within the body tag, do not hold off from giving it an ID attribute (actually restoring, somewhat) how we used to do it) … so we did …
<meta id=”myviewport” name="viewport" content="width=device-width, initial-scale=1.0">
… and then … - add into that Javascript function widthfix the new code …
function widthfix() { //
if (navigator.userAgent.match(/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
if (screen.width < 700) {
var mvp = document.getElementById('myviewport');
mvp.setAttribute('content','width=device-width, initial-scale=' + eval(screen.width / 768));
}
}
// Below is as per the previous posting
if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
document.getElementById('body_content').style.width='100%';
document.getElementById('nav_layer').style.width='100%';
document.getElementById('widget0').style.width='100%';
}
}
… adjusting that “Initial Scale” setting of the viewport for those smaller devices, off the webpage document onload event
If you are on such a mobile device, perhaps you see this improvement when accessing the RJM Programming Landing Page.
You can also see this play out at WordPress 4.1.1’s Responsive Design Viewport Initial Scale Tutorial.
Previous relevant Responsive Design Viewport Width Considerations Tutorial is shown below.
Responsive Design Viewport Width Considerations Tutorial
Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of …
- Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with …
Was .. Now is …
<meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with …
Was ..
function widthfix() { //
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
document.getElementById('body_content').style.width='100%';
document.getElementById('nav_layer').style.width='100%';
document.getElementById('widget0').style.width='100%';
}
Now is …
function widthfix() { //
if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
document.getElementById('body_content').style.width='100%';
document.getElementById('nav_layer').style.width='100%';
document.getElementById('widget0').style.width='100%';
}
Why?
- viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple …
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts
Food for thought, we hope, for those chipping away at responsive design amalgamations!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
