Kitz Forum

Internet => Web Hosting & Web Design => Topic started by: chenks on August 10, 2018, 02:14:48 PM

Title: website coding for mobile devices
Post by: chenks on August 10, 2018, 02:14:48 PM
i'm refreshing some of html skills after not doing it for quite a while (and learning the new stuff for supporting mobile devices/smaller screens).

i've knocked up a basic page with a logo, a heading and a paragraph of text. (
the text is inside a div with a set width of 500px, which is centered in the page, and with the text justified.

it looks all fine on a desktop web browser (html5 validated).

however when i view it on a mobile device, it doesn't seem to align properly.
i used

Code: [Select]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
which should make the page zoom in to fit the screen size, but it seems to zoom in correctly, but the text requires side scrolling to see it all (i assume this is due to the div width being 500px).

what is the correct way to code this so that it views correctly? (i know i could just remove the viewport line but that would result in the mobile devices having to manually zoom in to see it).

Code: [Select]
<!DOCTYPE html>

<html lang="en">

<title>Test Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#263d81">
<meta name="apple-mobile-web-app-status-bar-style" content="#263d81">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="/includes/css/test.css"/>
<link rel="icon" type="image/png" href="/includes/images/favicon.png">
<link rel="apple-touch-icon" href="/includes/images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="/includes/images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="167x167" href="/includes/images/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="/includes/images/touch-icon-iphone-retina.png">
<link rel="icon" sizes="192x192" href="/includes/images/android-icon.png">
<meta name="msapplication-square310x310logo" content="/includes/images/microsoft-icon.png">


<div class="main">

<img src="/includes/images/dummy.jpg" alt="Company Logo">
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Pretium lectus quam id leo in. Morbi leo urna molestie at elementum eu facilisis sed. Etiam erat velit scelerisque in dictum non consectetur. Eu non diam phasellus vestibulum lorem sed. Blandit turpis cursus in hac habitasse platea dictumst. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Nibh tellus molestie nunc non blandit massa. Ultricies mi eget mauris pharetra. Morbi blandit cursus risus at ultrices mi tempus. Eget aliquet nibh praesent tristique magna sit amet purus.



Code: [Select]
body {margin:0;padding: 0;font-family: 'Noto Sans', sans-serif;}

h1 {font-size: 150%;}
h2 {font-size: 110%;text-align: center;}

a {text-decoration: none;color: #000000;}
a:hover {text-decoration: underline;color: #000000;}
a.logout {text-decoration: none;color: #0000FF;}

.main {clear: both;padding-top: 52px;padding-left: 0px;text-align: center;}
.lorem {width: 500px;margin: auto;text-align: justify;}
Title: Re: website coding for mobile devices
Post by: Weaver on August 11, 2018, 03:23:52 AM
All good in Safari on massive iPad Pro 12" btw. Also looks good on a standard iPad 5.

Failed completely in iCab web browser with an SSL / TLS error -1200, so could not look at it.

Can try iPad Chrome and iPhone too but you probably have already done so.
Title: Re: website coding for mobile devices
Post by: chenks on August 11, 2018, 02:27:38 PM
interesting, wonder why iCab had a problem.

it's small screens i'm more interested in getting it working properly with.
Title: Re: website coding for mobile devices
Post by: Weaver on August 11, 2018, 03:16:21 PM
I often get web pages looking rather annoying on my giant iPad because of some stupid or cowardly design choices from Apple where text is gigantic and you find that you are not getting enough content shown so not taking advantage of the big display.

I switched to my iPad 5 this morning, what a culture shock for a while ! Whenever there is an iPad Pro 12"-unfriendly webpage and an opportunity to do something about it by customising CSS, I make sure to try and tackle it. I have tweaked wikipedia and my Firebrick router's admin web ui too, because the text was uncomfortably huge.