Esse problema é resolvido utilizando a META TAG viewport
.
Descrição básica: O viewport é a área onde seu website aparece
Adicione essa tag
no headhead
:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
- A propriedade
width
controla o tamanho da viewport; - A propriedade
initial-scale
controla o nível de amplificação; - As propriedades
maximum-scale
,minimum-scale
, euser-scalable
controlam a permissão para o usuário efetuar aumento ou diminuição da página;
AtualizeNão esqueça de atualizar a página antes de testar.
Espero ter ajudado.
Fontes:
https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.w3schools.com/css/css_rwd_viewport.asp