CODEWITHSUNDEEP
htmlcssmobile
Phil
Phil

Reputation: 14671

How to prevent mobile browser micro-shrinking HTML block level elements?

I'm trying to get my web-application styled accordingly for mobile devices using CSS @media tags.

I have access to two mobile devices on which I can test the development: a Nexus S and an old iPod Touch, both of which have low-res screens.

Declaring my meta headers, I opted for target-densitydpi=device-dpi for things to appear crisps without being molested much, otherwise strange lines and things appear on screen (with android chrome browser).

Now I'm afraid though things are going to appear extremely tiny on new devices high-res devices with super high DPIs.

I have search and read various queries on here but I don't really understand what I need to do here.

I can scale images 2x, 3x, 4x etc it's no problem but some of my block-level elements, such as header-block, has a definite height stated in pixels and if Nexus S with its 800-to-480px screen shows things in a way, I wonder how for example Galaxy S with 1280-720 display or iPhone 4 and 5 would show them?

How do I need to declare my tags and how can I fix this possible problem?

Upvotes: 1

Views: 801

Answers (1)

Alex
Alex

Reputation: 4774

Mobile browsers don't have the device's resolution. There are two standard mobile widths: 320px and 360px.

Google Nexus and Samsung Galaxy Note ( and Note 2 ) have a width of 360px, while nearly all the other devices have 320px width.

Which means it doesn't matter what screen resolution a mobile phone has, the browser will have a width of either 320 or 360px.

So you should focus on that.

You can read more about it here.

Upvotes: 1

Related Questions