All of my loyal visitors are already aware of the new look to my homepage; I changed back from a table structure to <div> structures and cascading style sheets. I also cleaned up my homepage, so it looks a lot less cluttered, but the big change for me as a web developer was getting rid of the table structure my web page fit into. Why was it a big deal? Table structures don't have as many cross browser compatibility issues as cascading style sheets, so now I'm back to testing for browser types so I don't have to worry if my web page renders nicely or not. Tables are also a lot more forgiving when it comes to rendering on different size screens. I have to test for screen size now, and display my mobile version when I detect a small screen.
What's a small computer screen? It used to be you could check for 480px screens, and you knew you were on a mobile device; no longer true. My surface tablet has a 10 1/2" screen, but it's also 1366 pixels wide. If you've been following everything I've been saying so far then you should already know what a pixel is, but just in case you don't: computer screens are illuminated by spots of light, and each light that hits the screen is a pixel (not technically accurate, but it gives a good visual of what's going on). It's possible to check for pixel density (how many pixels per square inch) besides pixel width, and then calculate screen width in inches. ...but, that might not work. E.g., Caprica (formerly my main PC, but now semi-retired) is hooked up to a portable TV (a nice one, with a 720p 19" screen), but is set to display only 1024px. Even though Caprica has a nice wide screen, I need the mobile version of my homepage to display on her. If you take a look at a screen size chart on http://www.w3schools.com/browsers/browsers_display.asp you'll see the next size up after 1024px is 1280px. I'm testing for 1280px now, and the mobile version of my homepage displays on Caprica. Here's the test:
<script>
var mobileSize = ((screen.width / window.devicePixelRatio) < 1280)
if (mobileSize)
{
window.location = "http://community-info.org/indexMobile.html";
}
</script>
I've written
some pages for a web development course I'm in (from scratch) that use cascading
style sheets, but they scale nicely. However, my homepage isn't from scratch. I
used a bunch of components I'd already written for my table based
homepage. ...but even if I wrote everything from scratch, that's not
a guarantee that my homepage would scale nicely. My latest school assignment has
a div on the left with double column text, a table in the center div, and an
aside on the right side of the page. You'd expect that to scale nicely, but it
doesn't. So, I ran a test for mobile devices again, but this time I just made
the page wider:
<script>
var myBody = document.getElementById("bodySection");
var mobileSize = ((screen.width / window.devicePixelRatio) < 1280)
if (mobileSize)
{
myBody.className += " scrollable";
}
</script>
Where scrollable is a class defined in a cascading style sheet:
.scrollable
{
width: 3000px;
}
As you can see, I made the page 3000px wide. This forces scrollbars on the page, and gives plenty of real estate on the screen for everything to be displayed correctly. BTW, when testing for screen size, always put your Javascript code right below the <body> tag. This makes the Javascript the first thing evaluated as the body of your page loads; the configuration of your page is modified before it's ever displayed on the screen.