The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Making something work on a mobile
Brian Chandler
post Jun 25 2024, 03:17 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,480
Joined: 31-August 06
Member No.: 43
Hello! Anyone still here??

I have the job of making a very basic page, reached from a QR code on the flyer for our upcoming concert, giving up to date info about the programme, and links to various things. For the moment, I just made an extremely basic page with no style or anything, just text: https://imaginatorium.org/ecco and tried looking at it on our phone (which I do not normally use). It's there, but is unreadably small. Since I haven't specified *anything* I guess that the default is no good. Is there a magic mantra which will make type appear by default at a readable size, and fit the screenwidth, etc etc, in other words work like a normal browser?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jun 25 2024, 04:23 AM
Post #2


Advanced Member
****

Group: Members
Posts: 234
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(Brian Chandler @ Jun 25 2024, 09:17 AM) *


Hello! Anyone still here??



Yes, someone is often here.

For mobile usage this metatag...

CODE

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

...is absolutely essential.

Example:
CODE

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<meta name="GENERATOR" content="Brian's Brain, ver. 49">

<title>コール・エッコ第33回定期演奏会</title>
</head>

<body>

<div id=main>

<h1>コール・エッコ第33回定期演奏会</h1>

<p> これから、プログラムなど情報を載せます。ご期待下さい
</p>

<div id=chirashi>
    <a href="chirashi.png">
    <img src="https://imaginatorium.org/music/chirashi-thumb.png" alt="チラシ"><br>
    チラシを見る</a>
</div>

</div>

</body>
</html>



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 25 2024, 04:35 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7
QUOTE(Brian Chandler @ Jun 25 2024, 10:17 AM) *

Hello! Anyone still here??

Yes!

QUOTE
Is there a magic mantra which will make type appear by default at a readable size, and fit the screenwidth, etc etc, in other words work like a normal browser?

You could add

CODE
<meta name="viewport" content="width=device-width">

in the HEAD section, it should hopefully make page content use the available screen area more effectively.

EDIT: didn't see coothead's reply. Both variants should work, AFAIK. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jun 25 2024, 12:01 PM
Post #4


Jocular coder
********

Group: Members
Posts: 2,480
Joined: 31-August 06
Member No.: 43
Thanks (both)! Amazing, magic mantra indeed. Just set the width to the width, the height to the height, and the scale to 1 and off you go. No doubt the default values are 37, -2.8, and 143, but not necessarily in that order.

I wonder if anyone knows of a simple web "mobile simulator" that shows the result of a page in a typical mobile? Using the actual thing is a total pain.

(Different issue, but is anyone an Apache expert?)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jun 25 2024, 02:20 PM
Post #5


Advanced Member
****

Group: Members
Posts: 234
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(Brian Chandler @ Jun 25 2024, 06:01 PM) *


I wonder if anyone knows of a simple web "mobile simulator"
that shows the result of a page in a typical mobile?



I use Firefox for my code testing and I use this procedure...

1. Click Tools
2. Click Browser Tools
3. Click Responsive Design Mode

...and, all things being equal, you should see something like this...

IPB Image

Unfortunately forums.htmlhelp.com does not use...

CODE

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

...which means that it does not render well on mobike devices.

Note

Google and other browsers, of course, will probably have similar tools.


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 25 2024, 03:03 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7
QUOTE(Brian Chandler @ Jun 25 2024, 07:01 PM) *

Thanks (both)! Amazing, magic mantra indeed. Just set the width to the width, the height to the height, and the scale to 1 and off you go. No doubt the default values are 37, -2.8, and 143, but not necessarily in that order.

There's an attempt at explanation here, if anyone's interested: https://quirksmode.org/mobile/viewports2.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 25 2024, 03:11 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Jun 25 2024, 09:20 PM) *

Google and other browsers, of course, will probably have similar tools.

In Vivaldi, you can go to Tools > Developer Tools, and the look for an obscure little icon at the top.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 27 2024, 08:24 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7
QUOTE(Brian Chandler @ Jun 25 2024, 07:01 PM) *

(Different issue, but is anyone an Apache expert?)

I doubt anyone consider themselves an Apache expert (or that I was using correct grammar there), but maybe someone could help with specific issues?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 6 2024, 05:15 PM
Post #9


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(coothead @ Jun 25 2024, 01:23 PM) *

I use Firefox for my code testing and I use this procedure...
1. Click Tools
2. Click Browser Tools
3. Click Responsive Design Mode

Never saw this before. Eh... vek zhivi - vek uchis. Similar to chrome but seems a little bit more friendly... Thanks!

QUOTE(Christian J @ Jun 28 2024, 05:24 AM) *

QUOTE(Brian Chandler @ Jun 25 2024, 07:01 PM) *

(Different issue, but is anyone an Apache expert?)

I doubt anyone consider themselves an Apache expert ...

Maybe Brian need some help with htaccess? Need to be more specific...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 14 2024, 04:31 AM
Post #10


Jocular coder
********

Group: Members
Posts: 2,480
Joined: 31-August 06
Member No.: 43
Thanks for the help on this... I wonder if there are any other general hints. AFAICS, using a phone means very limited navigation: you can't have tabs for a start. One way to help seems to be expandable sections; is there a neat way to do this? (Just point me at something to read, if you like.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 15 2024, 02:49 AM
Post #11


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(Brian Chandler @ Jul 14 2024, 01:31 PM) *

Thanks for the help on this... I wonder if there are any other general hints. AFAICS, using a phone means very limited navigation: you can't have tabs for a start. One way to help seems to be expandable sections; is there a neat way to do this? (Just point me at something to read, if you like.)


I am using details. Works.
CODE

<details>
    <summary>5. Question?</summary>
    <p>— Answer 1</p>
    <p>— Answer 2</p>
    <p>— Answer ***</p>
</details>

https://guskova.info/
https://laban.rs/r/m/chova

Links in the footer:
https://laban.rs/r/w/

And all of that is OK from the HTML point of view.
https://pagespeed.web.dev/analysis/https-ww...m_factor=mobile

This post has been edited by Dag: Jul 15 2024, 02:52 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 15 2024, 07:35 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,743
Joined: 10-August 06
Member No.: 7
QUOTE(Dag @ Jul 15 2024, 09:49 AM) *

QUOTE(Brian Chandler @ Jul 14 2024, 01:31 PM) *

Thanks for the help on this... I wonder if there are any other general hints. AFAICS, using a phone means very limited navigation: you can't have tabs for a start. One way to help seems to be expandable sections; is there a neat way to do this? (Just point me at something to read, if you like.)


I am using details. Works.

Let me add that no CSS or JS is necessary.

See also https://developer.mozilla.org/en-US/docs/We...Element/details
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 15 2024, 01:03 PM
Post #13


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(Christian J @ Jul 15 2024, 04:35 PM) *

QUOTE(Dag @ Jul 15 2024, 09:49 AM) *

QUOTE(Brian Chandler @ Jul 14 2024, 01:31 PM) *

Thanks for the help on this... I wonder if there are any other general hints. AFAICS, using a phone means very limited navigation: you can't have tabs for a start. One way to help seems to be expandable sections; is there a neat way to do this? (Just point me at something to read, if you like.)


I am using details. Works.

Let me add that no CSS or JS is necessary.

See also https://developer.mozilla.org/en-US/docs/We...Element/details


Yep! No CSS or JS is big advantage! Something very elegant imho.
They wrote there:
CODE

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>


I'd change this line Something small enough to escape casual notice with Anything you like (or need) here
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 13th December 2024 - 04:50 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC