cloudy cloudy

Author Topic: viewport  (Read 599 times)

0 Members and 1 Guest are viewing this topic.

Offline dsscheibe

  • Posts: 126
  • Phoenix, AZ
  • OS/Browser:
  • Win NT 10.0
  • Firefox 62.0
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
viewport
« on: November 04, 2018, 11:44:34 PM »
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.


Code: [Select]
<!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.

Code: [Select]
@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.
Code: [Select]
#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.

Code: [Select]
<div id="container">
blah, blah, blah, content goes here

</div>


Scott
Davis Pro2 Plus daytime aspirated, wired
Weather Display