1

Estou fazendo um site e ele não fica corretamente responsivo em alguns modelos de celulares.

Em um celular antigo (galaxy y duos) a imagem que uso não chega a aparecer, e olha que a página html é bem leve.

Podem me ajudar? Como consigo fazer meu site funcionar em uma maior gama de celulares?

Código html

<li class="form-line" data-type="control_radio" id="id_808"> 
<label class="form-label form-label-left form-label-auto" id="label_808" for="input_808"> </label>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<div id="cid_808" class="form-input jf-required">
  <div class="form-multiple-column" data-columncount="3" data-component="radio"> 
    <ul class="payment-methods">
      <li class="payment-method salada">
        <span class="form-radio-item">
            <span class="dragger-item"> </span>
            <div id="f_salada_menu"></div>
            <input type="radio" class="form-radio" id="input_808_0" name="q808_input808" value="Salada" />
            <label id="label_input_808_0" for="input_808_0"> Salada </label> 
        </span> 
      </li>
        
      <li class="payment-method lanche">
        <span class="form-radio-item"> 
            <span class="dragger-item"> </span>
            <div id="f_lanche_menu"></div>
            <input type="radio" class="form-radio" id="input_808_1" name="q808_input808" value="Lanche" /> 
            <label id="label_input_808_1" for="input_808_1"> Lanche </label>
        </span> 
      </li>
      
      <li class="payment-method suco">
        <span class="form-radio-item"> 
           <span class="dragger-item"> </span>
           <div id="f_suco_menu"></div>
           <input type="radio" class="form-radio" id="input_808_2" name="q808_input808" value="Suco" />
           <label id="label_input_808_2" for="input_808_2"> Suco </label> 
        </span> 
      </li>  
    </ul>
  </div>
</div>
         </li>       
         
         
         <style type="text/css">


body {
    padding: 25px;
}

.payment-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payment-methods:after {
  content: "";
  clear: both;
  width:100px;
}

.payment-method {
  border: 1px solid #ccc;
  box-sizing: border-box;
  float: left;
  height: 70px;
  position: relative;
  width: 250px;
  height:250px;
}

.payment-method label {
  background: #fff no-repeat center center;
  bottom: 1px;
  cursor: pointer;
  display: block;
  font-size: 0;
  left: 1px;
  position: absolute;
  right: 1px;
  text-indent: 100%;
  top: 1px;
  white-space: nowrap;
}

.payment-method + .payment-method {
  margin-left: 25px;
}

.lanche label {
  background-image: url(http://i.imgur.com/TN8fMNT.jpg);
  background-size:100%;

}

.salada label {
  background-image: url(http://i.imgur.com/7f8QY1k.jpg);
  background-size:100%;

  
}

.suco label {
  background-image: url(http://i.imgur.com/TmPnN3u.png);
  background-size:100%;
}


#salada_radio, #lanche_radio, #suco_radio{
  display:none;
}

#f_salada_menu, #f_lanche_menu, #f_suco_menu{
  display:none;
}


.payment-methods input:checked + label {
  outline: 4px solid #21b4d0;
  -webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
  filter: blur(0px);
  opacity: 1;
}

</style>



<style type="text/css">
/*AREA RESPONSIVA MOBILE*/
@media only screen and (max-width: 480px) {
  .payment-method {
  border: 1px solid #ccc;
  box-sizing: border-box;
  float: left;
  height: 70px;
  position: relative;
  width: 33%;
  height:250px;
}
 
.payment-method + .payment-method {
    margin-left: 0px;
} 
 
  
.lanche label {
  background-image: url(http://i.imgur.com/TN8fMNT.jpg);
  background-size:300%;
  opacity: 0.4;
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(5px);

  
}

.salada label {
  background-image: url(http://i.imgur.com/7f8QY1k.jpg);
  background-size:300%;
  opacity: 0.4;
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(2px);
}

.suco label {
  background-image: url(http://i.imgur.com/TmPnN3u.png);
  background-size:300%;
  opacity: 0.4;
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(2px);

}
  
#f_salada_menu {
  display:block;
	width: 100%;
	height: 100%;
	background: #73B14E;
	z-index:100;
}

#f_lanche_menu {
  display:block;
	width: 100%;
	height: 100%;
	background: #AB834F;
	z-index:100;
}

#f_suco_menu {
  display:block;
	width: 100%;
	height: 100%;
	background: #CC6322;
	z-index:100;
}
  
  
}


</style>

A imagem abaixo mostra um celular que abriu o site corretamente

inserir a descrição da imagem aqui

A imagem abaixo mostra um celular antigo (samsung galaxy duos y) que não abriu corretamente o site

inserir a descrição da imagem aqui

Porém em um simulador online este mesmo celular (galaxy duos y) teve um comportamento diferente do que foi testado na prática

inserir a descrição da imagem aqui

1

1 Resposta 1

-2

Atualmente existem frameworks para desenvolvimento responsivo que utiliza o conceito de mobile first, entre eles: bootstrap(http://getbootstrap.com/) e materializecss, estes 2 frameworks possuem um conjunto de componentes que ajudam desde a parte da grid para diversos tamanho de tela dos dispositivos até o design da página, caso venha a usar angulaJs, sugiro utilizar o AngulaUi, ele possui uma versão para o bootstrap para o angularJs. Estes frameworks foram feitos visando a produtividade do desenvolvedor, então você não precisaria se preocupar com o desenvolvimentos de algumas funcionalidades e possuem compatibilidade com a maioria dos navegadores, contudo como toda ferramenta, ela apenas te auxilia a realizar determinada tarefa, fincando a cargo do desenvolvedor fazer os ajustes necessários.

Abaixo o sistema de grid para o bootstrap: inserir a descrição da imagem aqui

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .