CODEWITHSUNDEEP
htmlmobilemeta-tags
Unhappy Blogger
Unhappy Blogger

Reputation: 183

Meta viewport width on all devices

I have a website with a full width of 420px, and I want this to be visible on mobile devices by having it load up in a zoomed out state.

So for this I have used:

<meta name="viewport" content="width=420">

This displays exactly how I want it to on my Samsung Galaxy S4 Phone in portrait mode, but when I turn it into landscape it scales the whole website up to the full width of the screen, which looks way too big.

I have also tested it on my Samsung Galaxy Tab 3 Tablet, and it scales it up on there too (Portrait & Landscape), which obviously looks even worse.

How do I get it to scale down on my phone in portrait mode (like it is now), but display a true width on other larger devices?

Upvotes: 0

Views: 322

Answers (2)

gem007bd
gem007bd

Reputation: 1165

I think this viewport will work for all device

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

Upvotes: 0

Unhappy Blogger
Unhappy Blogger

Reputation: 183

I found the solution to this by adding initial-scale=1 to the Meta:

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

Upvotes: 1

Related Questions