Ho un problema :
Ho installato il tema bootstrap che funziona perfettamente ma purtroppo nn si adatta ai dispositivi portatili. Cioè da iPhone o altri dispositivi il menu rimane come nella versione desktop. Se vado nel sito bootstrap ufficiale invece funziona correttamente. C'è Qualche impostazione all'interno del modulo bootstrap che mi sfugge?
Grazie
Tema bootstrap
Ven, 06/05/2016 - 10:52
#1
Tema bootstrap
Dettaglio: sto usando la cartella subtheme perché ho personalizzato alcune sezioni del caso...
jbond82
Prova a dare un occhio qui, sembrerebbe lo stesso problema.
Grazie gp! ho letto e sembra essere il mio stesso problema. In effetti se metto il tema di default da cellulare funziona. Su drupal ho impostato la versione di jQuery update su 1.9. Ho provato a mettere gli script nel file sites/all/themes/subtheme/subtheme.info/templates/html.tpl.php in questo modo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN""http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></scri... src="//cdn.jsdelivr.net/bootstrap/3.3.6/js/bootstrap.js"></script>
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<link href='https://fonts.googleapis.com/css?family=Sacramento|Source+Sans+Pro' rel='stylesheet' type='text/css'>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
ma non funziona comunque.
Non so come risolvere. c'è qualcosa che mi sfugge.
p.s. dal cellulare non funziona ma se riduco dal notebook le dimensioni della finestra si.
jbond82
A vedere quel codice noto che manca il meta tag viewport, prova ad inserire quanto segue tra i tag head.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Ti consiglio di inserirlo subito dopo di:
<?php print $head; ?>No che dovrebbe cambiare qualcosa ma in teoria è più pulito. :-)
GRANDE gp mi hai illuminato! Ora funziona perfettamente. Se puoi mi spieghi tecnicamente cosa fa in particolare quella riga di codice?
Comunque grazie 1000
jbond82
Perfetto. :-)
il Meta viewport serve ad indicare al browser come gestire e controllare le dimensioni e scala dell'area visibile della pagina.
Se vuoi approfondire dai un occhio ai link qui di seguito, dove tra l'altro trovi pure altro materiale interessante da leggere:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/...
https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=i...