CODEWITHSUNDEEP
htmlcssmobileresponsivemeta-tags
clmsftsw
clmsftsw

Reputation: 47

Responsive - All elements are way too small on mobile devices

I am working on a website right know, but I have a weird issue with the view on mobile devices. When I resize the window on a desktop browser the elements and fonts are changing with the viewport how they should. When I open the website on a mobile device all fonts and elements (e.g. the burger menu) are way to small. It looks like it is a scaling issue or something similar. I have the meta viewport tag in the head so that is not the issue.

I couldn't find any similar questions here or on any other forum. I hope somebody can help. I have attached some screenshots, but if necessary I can provide the URL. Thank you in advance.

Full Screen Window
Resized Window
Responsive example 1
Resposive example 2

Upvotes: 4

Views: 3617

Answers (1)

DohaHelmy
DohaHelmy

Reputation: 809

Make sure to include responsive meta tag to insure that your browser gets the right width of your device instead of zooming out the page

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

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Further reading Here

Upvotes: 11

Related Questions