/    Sign up×
Community /Pin to ProfileBookmark

How to accommodate/stop Tablet/Mobile screen/display settings effecting webpage

Copy linkTweet thisAlerts:
Oct 17.2022

I’m developing my own mobile site and I’ve been viewing it on my own Android mobile phone with Screen Zoom and Display Size set to their defaults. The site looks fine.

When I view the site on a different mobile phone, with the “Screen Zoom” setting increased, the website appearance changes badly, objects increase in size and become misplaced. The same happens on my Android tablet when I increase the “Display Size”

I’ve got `<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1″>` in my `<head>` is there a setting to stop the page increasing in size or do I have to create the divs, buttons, images etc with a % value rather than a set pixel value

[https://i.stack.imgur.com/kwpaI.jpg]
[https://i.stack.imgur.com/kpmtb.png]

to post a comment
HTML

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@tracknutOct 17.2022 — The latter. If you fix the size of your page, then users who may like their page larger, or have worse eyes than you, will not be able to see your site. I can't imagine that's a good solution. So yes, base your object sizes on percentages or em's (for fonts), and only very unique cases like a border around a box should you use px.

Then provide images in larger resolution than your smallest view, so that they won't be pixelated when folks zoom up a bit. Either by just giving a larger image than "needed", or by implementing the srcset= attribute on your img elements.
×

Success!

Help @stocktonlad spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...