Making something work on a mobile |
Making something work on a mobile |
Brian Chandler |
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? |
coothead |
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 |
coothead |
Christian J |
Jun 25 2024, 04:35 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
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. |
Brian Chandler |
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?) |
coothead |
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 |
coothead |
Christian J |
Jun 25 2024, 03:03 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
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 |
Christian J |
Jun 25 2024, 03:11 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Jun 27 2024, 08:24 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
|
Dag |
Jul 6 2024, 05:15 PM
Post
#9
|
Advanced Member Group: Members Posts: 122 Joined: 24-October 06 Member No.: 549 |
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! (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... |
Brian Chandler |
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.)
|
Dag |
Jul 15 2024, 02:49 AM
Post
#11
|
Advanced Member Group: Members Posts: 122 Joined: 24-October 06 Member No.: 549 |
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 |
Christian J |
Jul 15 2024, 07:35 AM
Post
#12
|
. Group: WDG Moderators Posts: 9,743 Joined: 10-August 06 Member No.: 7 |
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 |
Dag |
Jul 15 2024, 01:03 PM
Post
#13
|
Advanced Member Group: Members Posts: 122 Joined: 24-October 06 Member No.: 549 |
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 |
Lo-Fi Version | Time is now: 11th December 2024 - 06:30 AM |