2

Antes de começar a limpar meus arquivos de CSS e de JS, quando abria um select no meu dispositivo móvel (Windows Phone com IE) ele abria as opções numa tela preta que se sobrepunha à da página, e só desaparecia depois da option ser selecionada (ou da operação ser cancelada pelo botão voltar).

Algo mais ou menos assim:

inserir a descrição da imagem aqui

Mas agora isso parou de funcionar, e está abrindo da forma normal (e indesejada), assim:

inserir a descrição da imagem aqui

Durante este processo eu removi toda CSS que não era utilizada à partir de uma página rodando no navegador, deixei de referenciar a JQuery Mobile (mas já inclui de novo e tenho quase certeza de que não era isso)...

O meta name "viewport" está assim:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Estou usando o selectpicker, e o HTML está assim:

<label for="Cdiainicio">
                <select name="Tdiainicio" id="Cdiainicio" class="selectpicker" data-width="70px">
                    <?php include $_SERVER['DOCUMENT_ROOT'] . "/models/scripts/datas/combos/combodia.html"?>
                </select>
            </label>

(Já tentei retirar o data-width mas não resolveu)

No arquivo combodia.html estão as options:

<option value='dia'>Dia</option>
<option value='01'>1</option>
<option value='02'>2</option>
<option value='03'>3</option>
<option value='04'>4</option>
<option value='05'>5</option>
<option value='06'>6</option>
<option value='07'>7</option>
<option value='08'>8</option>
<option value='09'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>

Então o que gostaria de saber é como este comportamento é alterado? Tem a ver com a jQuery Mobile? Pode ser alguma coisa nas CSS's?

5
  • 1
    Não entendi qual é a dúvida, se quer usar o seletor default é só remover a classe selectpicker, não?! 12/10/2015 às 18:07
  • Não, nos navegadores eu quero que apareça com o selectpicker, e mesmo nos dispositivos mobile, quero que apareça com o select picker. Só nos dispositivos mobile, quando abrir as options, quero que abra daquela forma que postei na imagem (as imagens estão abrindo aí?) Valeu.
    – gustavox
    12/10/2015 às 18:10
  • Ah, então, vc tem razão, sem o select picker abriu da forma desejada... Na verdade acho então que não foi retirar CSS, mas incluir (o selectpicker)... Mas então, usando o selctpicker não tem jeito de obter este mesmo comportamento? @renan
    – gustavox
    12/10/2015 às 18:14
  • Em todos os navegadores mobile você quer que tenha a aparência do Windows Phone? Ou só no Windows mesmo? 12/10/2015 às 18:21
  • Em todos eu gostaria que tivesse o mesmo tipo de comportamento (se é que outros dispositivos tem esse mesmo tipo de comportamento), ou seja, que usasse o padrão do celular, abrindo esta tela que ocupa toda área de navegação, aparecendo as opções grandes e tal... @renan
    – gustavox
    12/10/2015 às 18:37

1 Resposta 1

2

Use Javascript para obter o userAgent e checar se o usuário está acessando o site com um navegador mobile. Se o valor for verdadeiro, basta remover a classe que altera a aparência do select.

Você pode usar o regex do site detect mobile browsers para isso.

var ua = navigator.userAgent || navigator.vendor || window.opera;

if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(ua)) {

   /* Remove a classe 'selectpicker'. */
   document.getElementById('meu-select')
           .classList
           .remove('selectpicker');
}
12
  • Pra usar com classe uso document.getElementsByClassName? Valeu, não testei ainda, mas acho que isso vai resolver não só este problema, como permite alterar tudo que eu achar útil para os dispositivos mobile né... Valeu!
    – gustavox
    12/10/2015 às 19:03
  • Então, não consegui fazer funcionar mesmo por id... o inspetor diz que a variável vendor não está definida. Preciso alterar alguma coisa?
    – gustavox
    12/10/2015 às 19:25
  • @gustavox qual navegador? Como está seu código? 12/10/2015 às 19:40
  • Chrome, o código está idêntico ao que vc postou, só mudei a id...
    – gustavox
    12/10/2015 às 20:13
  • 1
    jsfiddle.net/gustavox/57gxf079/3 Coloquei dois selects, já com o select picker, tentando pegar por classe (mas já coloquei os id's nos selects caso não dê pra fazer por classe)... valeu pela ajuda cara!
    – gustavox
    12/10/2015 às 23:34

Você deve fazer log-in para responder a esta pergunta.

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