Site para 2 resoluções de tela


(Pedro Jeferson) #1

Eu preciso criar um site onde o mesmo sera praticamente 2 em 1, terei uma tela pra desktop e outro pra moveis.

Daria pra usar mediaqueries porem as telas são totalmentes diferentes, gostaria de saber se existe algum plugin ou forma de criar algo assim?


(Valdeir Santana) #2

https://github.com/kaimallea/isMobile
http://mobiledetect.net/ basta redirecionar o cliente para o site para dispositivos móveis (http://m.example.com)

ou pesquisar algum plugin que faça essa implementação.


(Veteranokuno) #3

Opa sei que não é bem o que você quer mais procura por grids html, css, é muito melhor e você já desenvolve para várias resoluções de tela diferentes.

!Lembre-se tamanho de tela não importa o que importa é a resolução do device.


(Vitor Melo) #4

Só com media queries você pode fazer isso. Você pode usar os modelos adaptáveis do Chrome ou Firefox para ir verificando a resolução. Assim você pode ir modificando todo o estilo da página com isso.

Firefox (Ctrl+Shift+M)


Na verdade você vai fazer algo além de dois em um, você vai fazer várias resoluções em um. Assim, no meu fluxo de trabalho eu utilizo algumas resoluções como referência.

No caso de javascript você pode usar a função Match Media, ela verifica o que será executado dependendo da resolução.

Minhas resoluções de referências:
360
400
480
600
720
840
960
1024
1280
1440


(Pedro Jeferson) #5

Entao eu até usaria media queries porem, a mudança e bem brusca mesmo.

Exemplo na minha home sera uma home tranquilo pra desktop, porem pro mobile as sessoes serao em acordeon, queria adaptar isso no wordpress.

Consigo fazer dois sites um pra mobile e outro desktop?

Grato.


(Luã Ciceri Schwertner) #6

@pedro.jeferson o mais indicado seria fazer isso com media queries. Mas como queres fazer dois sites e está usando o Wordpress, dá uma olhada sobre Multisite , que é uma funcionalidade nativa do WP e acho que vai resolver teu problema :wink:.


(Fabricciom) #7

Amigo tente dar uma olha no Jetpack, talvez te ajude abç :wink:


(Nick Lima) #8

Fala @pedro.jeferson, cara se for usando o WP, você pode usar um função nativa dele que exibe resultados apenas em Smartphones e Tablets.

Para isso basta criar os seus templates e chamar de acordo com sua necessidade.
O código deve ficar assim:

<?php if(wp_is_mobile()) {
get_template_part('templates/mobile);
else {
get_template_part('templates/desktop);
} ?>

Isso é só uma ideia. Espero que consiga resolver.


(Maílson Dias) #9

Opa @pedro.jeferson. Se for tipo outro tema pq irá ter muitas alterações eu faria como @Nick mencionou, uma template-part pra cada, se for alguns components no front eu leria o conteúdo do component com js, armazenava num array depois escrevia na nova view com o accordion que mencionou; limpava a div.parent imprimindo o novo html com o accordion.

Fiz muito isso no site da CaixaSeguradora, tiver dúvidas chamai... Valeu