0
Planned

Mobile Site

Hayden Jones 5 years ago updated by Tom 5 years ago 3

Hi,

Awesome work on the full screen mobile app for android. Its working great. Do you think it would be possible to also add the following line to the header:

<meta name="viewport" content="width=device-width, initial-scale=1">


The scale '1' might be a bit high but it will increase the "zoom" of the mobile site making it look much more app like. Using remote chrome developer tools I have tested this. The CSS might need some slight tweaking but it does make things much more usable.


Thanks,

Adding this to the CSS file once the viewport has been added sort of fixes the scaling issues. A few more things need to be fixed but unfortunately without access to the HTML pages themselves this is diffifult.


@media (max-width: 810px) {

#toppagebar
{
position:fixed;
z-index:10;
top:0px;
left:0px;
width:100%;
background-color:black;
border-bottom: solid grey 1px;
}

#topbarcenter
{
margin-left: auto;
margin-right: auto;
/* width: 500px; */
width: 100%;
}

#topbarcenter #pagelabel
{
float: left;
/* width: 120px; */
margin-top: 10px;
font-weight: bold;
font-family: "Arial";
font-size: 22px;
color: #CCC;
}

#group
{
/* margin-top:150px; */
margin-top:100px;
margin-left:10px;
margin-right:10px;
}

#topbarleft
{
position:absolute;
top:70px;
left:0px;
}

#topbarright
{
position:absolute;
top:70px;
right:0px;

}
}

Under review

Thanks !

A better layout for mobile devices is already on my todo list, this will help.