Home
JAQForum Ver 24.01
Log In or Join  
Active Topics
Local Time 08:57 07 Oct 2025 Privacy Policy
Jump to

Notice. New forum software under development. It's going to miss a few functions and look a bit ugly for a while, but I'm working on it full time now as the old forum was too unstable. Couple days, all good. If you notice any issues, please contact me.

Forum Index : Microcontroller and PC projects : Web page design

Author Message
palcal

Guru

Joined: 12/10/2011
Location: Australia
Posts: 2000
Posted: 12:48am 05 Oct 2025
Copy link to clipboard 
Print this post

Hi all, this is a bit different. I have designed a web page but am having trouble getting it to fit any browser size. On my desktop it is ok but on the smaller laptop screen I have to scroll every way to see it all. I used the following code but it didn't work. It is a public site, I am new to this and get lost easily.

meta name="viewport" content="width=device-width, initial-scale=1.0">
.
Can anyone help.
"It is better to be ignorant and ask a stupid question than to be plain Stupid and not ask at all"
 
Gizmo

Admin Group

Joined: 05/06/2004
Location: Australia
Posts: 5132
Posted: 01:24am 05 Oct 2025
Copy link to clipboard 
Print this post

The issue is some browsers ( looking at you in particular Safari ), dont necessarily take any notice of your meta tags.

In my JAQ intranet application, I use the following java to resize the page to the browser window on mobile devices. Its not perfect.

In the body tagI call a function like this....


<body onLoad="PageZoom();">
 <div style="width:330px; margin:auto;" id="PageDiv">
   Blah blah


That div encases the entire page in the body tag. You can control the width with that style "width:330px", but its not necessary. In this case its a generic mobile phone width so I can check th epages looks ok on a mobile screen as I develop the page.

Then elsewhere on the page, usually in the header somewhere, I have...

<script language="javascript">
function PageZoom(){
 var DivW=document.getElementById("PageDiv").offsetWidth;
 var PageW=window.innerWidth;
 Z= Math.round(PageW / DivW * 95);
 Zstring=Z.toString() + "%";
 document.body.style.zoom = Zstring;
 document.getElementById("PageDiv").focus();
}
</script>


Once the page has loaded, it gets the width of the div "PageDiv", and then adjusts the zoom to suit.

Glenn
Edited 2025-10-05 11:27 by Gizmo
The best time to plant a tree was twenty years ago, the second best time is right now.
JAQ
 
palcal

Guru

Joined: 12/10/2011
Location: Australia
Posts: 2000
Posted: 01:56am 05 Oct 2025
Copy link to clipboard 
Print this post

I'll try that,  thanks.

EDIT.... That didn't work, I don't know enough about HTML ,so I can just put up with it.
Edited 2025-10-05 14:20 by palcal
"It is better to be ignorant and ask a stupid question than to be plain Stupid and not ask at all"
 
Print this page


To reply to this topic, you need to log in.

The Back Shed's forum code is written, and hosted, in Australia.
© JAQ Software 2025