CODEWITHSUNDEEP
cssmobileresponsive-design
NinaNa
NinaNa

Reputation: 1647

Mobile page width is larger than causes Chrome emulator to scale smaller

I am trying to create a mobile login page consisting of a body and div with text boxes inside for user name password. When using the Chrome emulator I notice that the emulator automatically scales to 0.4 (which obviously doesn't look good) When I scale up to 1.0 my page seems to stretch beyond the viewport. This is my body css:

    html, body {font-family: Arial, sans-serif;background: #fff;margin: 0;padding: 0;border: 0;position: absolute;height: 100%; width: 100% !important;max-width:100% !important;font-size: 13px;color: #404040;direction: ltr;}

Otherwise all child elements are narrower then the requested viewport.

I am quite new to mobile design and I feel like I am missing some kind of setting/css which will cause the page to scale correctly.

Upvotes: 0

Views: 927

Answers (1)

NinaNa
NinaNa

Reputation: 1647

Adding the viewport meta tag did the trick!

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

Upvotes: 1

Related Questions