Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael Bazanella

Problema com design responsivo.

Por , em Desenvolvimento frontend

Recommended Posts

Rafael Bazanella    0

Rafael Bazanella
Postado

Bom dia.

 

Estou trabalhando em um projeto que envolve a necessidade de Design Responsivo. É um assunto novo pra mim (até porque não sou WebD).

Depois de pesquisas sobre o assunto, implementação e testes no browser Firefox (utilizando a ferramenta Ctrl + Shift + M), finalizei a estrutura e as folhas de estilo para cada dispositivo de visualização.

 

Porém, quando parti para os testes em ambiente real (browser mobile, neste caso, num Galaxy S3), não houve mudança nenhuma na visualização da aplicação. Procurei algumas infos sobre o aparelho e cuncluí que ele roda uma resolução de 1280x720 (pelo menos assim foi como encontrei por aí).

Resumindo: no smartphone esta sendo exibido o site da mesma forma como num desktop.

Abaixo, meu HEAD html (omiti as tags 'title' e 'script').

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width:device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/jquery.steps.css">
	<link rel="stylesheet" type="text/css" href="css/style_mobile.css" media="all and (max-device-width:480px)">
	<link rel="stylesheet" type="text/css" href="css/style_tablet.css" media="all and (min-device-width:481px) and (max-device-width:960px)">
	<link rel="stylesheet" type="text/css" href="css/style_normal.css" media="all and (min-device-width:961px)">
</head>

Se alguém puder me dar algum esclarecimento ou apontar algum erro, por favor...
Grato desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Coloque a metatag viewport

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

width:device-width;
corrija para:

width=device-width
= no lugar de :

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito