viewport

This works well in any browser I have tried on Android, Firefox, chrome, duckduckgo, phones, tablets. I don’t know anyone with an Iphone I can get to test it. https://weather.scottsworld.info or https://scottsworld.info works even better because it doesn’t have any large images wider than my phone view screen so it does not scroll sideways. I have been converting my pages over to HTML 5. This first bit is a html 5 head top of the page, I’ve experimented with viewport and simple seems to work best. start setting sizes and such and it works on some things and not others. Viewport wants to be right under the head tag, my html validator said my charset needed to be with in the first 125 characters of the page. It made sense to put the style sheet right under it. These tell the browser what to render the page as. You can call your style sheet anything you want, it does not need to be weatherstyle or any other name.


<!DOCTYPE html>
<html lang="en">
   <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="weatherstyle.css" title="Default"/>


In my stylesheet there is a media screen setting.


@media screen  {
body         {
    margin: auto;
    font-size: 100.00%;
    letter-spacing: 1px;
    word-spacing: inherit;
}
#container       {
float: none;
	width: 100%;
	padding: 2px;
	margin: 10px;
	border: 0px none transparent;
}
}

It makes reference to the container ID which is up near the top of my style sheet, this is the code for that.


#container {
	width: 90%;
	padding: 8px;
	border: 0px none transparent;
    float: left;
}


This is the container code in the body of the web page. It does not need to be called container just have the same ID as the #container in the style sheet. It goes around the main body of the webpage, it can go around everything in the page if you want. My #header and #footer #sidenav are outside the container.


<div id="container">
blah, blah, blah, content goes here

</div>