Template für Handy anpassen oder Desktop-Größe anzeigen lassen

WebStarJan

Guten Abend,

ich habe eben angefangen meine Webseite zu gestalten. Habe mich für das Company Template entschieden, da es meinen Optischen Vorstellungen entspricht.

So jetzt zu meinem Problem:
Also die Webseite passt sich am Computer perfekt der Größe an wenn ich den Browser kleiner/größer mache, doch am Handy ist die Seite irgendwie komplett zusammengewürfelt.
Jetzt würde ich es entweder gerne so hinbekommen, dass die Webseite sich auf die mobile Ansicht einstellt oder die ganz normale Desktop Version angezeigt wird.

Wäre das irgendwie möglich?

Gruß Jan

Elwood

Moin,

gib uns mal einen Link zur Seite.

Die Templates des Anbieters wurden das letzte mal für 3.4.3 getestet.
Da eine Slideshow integriert ist, könnte es hier Probleme geben.

Hast du die mobile Ansicht mal mit dem Standard-Template Protostar getestet, ob es auch am Template liegt?

Wenn ja, mal beim Support nachfragen, ob es Updates für 3.5.1 gibt:

http://joomlatemplates.me/contact/

WebStarJan

Hier gehts zu meiner Seite
Habe es mit Protostar getestet da funktioniert es ohne Probleme.

Aber man muss ja irgendwo auch das ausschalten können das sich das der Größe anpasst?

adalan

Zitat von WebStarJan

http://it-ebinger.de
Aber man muss ja irgendwo auch das ausschalten können das sich das der Größe anpasst?

Und warum willst Du das ausschalten können?

Ein responsives Template passt sich halt nun mal der Größe an, und zwar jeder Größe, egal ob Handy oder Desktop.

WebStarJan

@adalan

Weil es ja nicht richtig funktioniert.

adalan

Elwood hat ja oben schon dargelegt, dass es wohl an einem veralteten Template liegt. Ich würde Dir auch empfehlen, das Template Protostar zu nehmen. Das ist auch meiner Erfahrung nach eines der wenigen, das praktisch fehlerfrei ist. Als Slider könntest Du z.B. slideshowck verwenden. Den findest Du bei http://extensions.joomla.org/ und der ist ebenfalls responsiv.

Indigo66

Füge das in den head Deines Templates (index.php) hinzu.

Code

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

WebStarJan

Zitat von Indigo66
Füge das in den head Deines Templates (index.php) hinzu.
Code
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">

Danke!

Spoiler anzeigen

<?php /** * @copyright Copyright (C) 2013 JoomlaTemplates.me - All Rights Reserved. **/ defined( '_JEXEC' ) or die( 'Restricted access' );
$scrolltop = $this->params->get('scrolltop');
$logo = $this->params->get('logo');
$logotype = $this->params->get('logotype');
$sitetitle = $this->params->get('sitetitle');
$sitedesc = $this->params->get('sitedesc');
$menuid = $this->params->get('menuid');
$animation = $this->params->get('animation');
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$templateparams = $app->getTemplate(true)->params;
$menu = $app->getMenu();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<jdoc:include type="head" />
<?php if ( version_compare( JVERSION, '3.0.0', '<' ) == 1) { ?>
<script src="http://ajax.googleapis.com/ajax/libs/jque…3/jquery.min.js"></script>
<?php } else { JHtml::_('bootstrap.framework');JHtml::_('bootstrap.loadCss', false, $this->direction);}?>
<?php include "functions.php"; ?>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/font-awesome.min.css" type="text/css" />


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<?php if ($scrolltop == 'yes' ) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/scroll.js"></script>
<?php endif; ?>
</head>
<body class="background">

<div id="header-wrap" class="clr">
<div id="header" class="container row clr">
<div id="logo" class="col span_4">
<?php if ($logotype == 'image' ) : ?>
<?php if ($logo != null ) : ?>
<a href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>" alt="<?php echo htmlspecialchars($templateparams->get('sitetitle'));?>" /></a>
<?php else : ?>
<a href="<?php echo $this->baseurl ?>/"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" border="0"></a>
<?php endif; ?><?php endif; ?>
<?php if ($logotype == 'text' ) : ?>
<a href="<?php echo $this->baseurl ?>"><?php echo htmlspecialchars($sitetitle);?></a>
<?php endif; ?>
<?php if ($sitedesc !== '' ) : ?>
<div id="site-description"><?php echo htmlspecialchars($sitedesc);?></div>
<?php endif; ?>
</div>
<?php if ($this->countModules('menu')) : ?>
<div id="navbar-wrap" class="col span_8">
<nav id="navbar">
<div id="navigation">
<jdoc:include type="modules" name="menu" style="menu" />
</div>
</nav>
</div>
<?php endif; ?>
</div>
<?php if (is_array($menuid) && !is_null($menu->getActive()) && in_array($menu->getActive()->id, $menuid, false)) { ?>
<div id="slide-wrap" class="container row clr">
<?php include "slideshow.php"; ?>
</div>
<?php } ?>
</div>
<?php $menu = $app->getMenu(); if ($menu->getActive() == $menu->getDefault()) { ?>
<div class="company"><?php jlink(); ?></div>
<?php } ?>
<div id="wrapper">
<?php if ($this->countModules('breadcrumbs')) : ?>
<div class="container row clr">
<jdoc:include type="modules" name="breadcrumbs" style="none"/>
</div>
<?php endif; ?>

<?php if ($this->countModules('user1')) : ?>
<div id="user1-wrap"><div id="user1" class="container row clr">
<jdoc:include type="modules" name="user1" style="usergrid" grid="<?php echo $user1_width; ?>" />
</div></div>
<?php endif; ?>

<div id="box-wrap" class="container row clr">
<div id="main-content" class="row span_12">
<?php if ($this->countModules('left')) : ?>
<div id="leftbar-w" class="col span_3 clr">
<div id="sidebar">
<jdoc:include type="modules" name="left" style="grid" />
</div>
</div>
<?php endif; ?>
<div id="post" class="col span_<?php echo $compwidth ?> clr">
<div id="comp-wrap">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
<?php if ($this->countModules('right')) : ?>
<div id="rightbar-w" class="col span_3 clr">
<div id="sidebar">
<jdoc:include type="modules" name="right" style="grid" />
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($this->countModules('user2')) : ?>
<div id="user2-wrap"><div id="user2" class="container row clr">
<jdoc:include type="modules" name="user2" style="usergrid" grid="<?php echo $user2_width; ?>" />
</div></div>
<?php endif; ?>
<?php include "social.php"; ?>
<div id="footer-wrap" class="container row clr" >
<?php if ($this->countModules('copyright')) : ?>
<div class="copyright">
<jdoc:include type="modules" name="copyright"/>
</div>
<?php endif; ?>
<?php if ($this->countModules('footer-menu')) : ?>
<div id="footer-nav">
<jdoc:include type="modules" name="footer-menu" style="none" />
</div>
<?php endif; ?>
</div>
</body>
</html>

Habe es oben eingefügt, allerdings konnte ich keine Veränderung feststellen.
Würde schon gerne bei dem Template bleiben ich meine die Demo Seite funktioniert mobil ja auch perfekt.

Gruß Jan

CurlY BracketS

Die selbe Anweisung steht anders formuliert weiter unten nochmals und überschreibt die erste....

WebStarJan

Danke habe ich raus genommen funktioniert immer noch nicht.

Spoiler anzeigen

<?php /** * @copyright Copyright (C) 2013 JoomlaTemplates.me - All Rights Reserved. **/ defined( '_JEXEC' ) or die( 'Restricted access' );
$scrolltop = $this->params->get('scrolltop');
$logo = $this->params->get('logo');
$logotype = $this->params->get('logotype');
$sitetitle = $this->params->get('sitetitle');
$sitedesc = $this->params->get('sitedesc');
$menuid = $this->params->get('menuid');
$animation = $this->params->get('animation');
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$templateparams = $app->getTemplate(true)->params;
$menu = $app->getMenu();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<jdoc:include type="head" />
<?php if ( version_compare( JVERSION, '3.0.0', '<' ) == 1) { ?>
<script src="http://ajax.googleapis.com/ajax/libs/jque…3/jquery.min.js"></script>
<?php } else { JHtml::_('bootstrap.framework');JHtml::_('bootstrap.loadCss', false, $this->direction);}?>
<?php include "functions.php"; ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/font-awesome.min.css" type="text/css" />


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<?php if ($scrolltop == 'yes' ) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/scroll.js"></script>
<?php endif; ?>
</head>
<body class="background">

<div id="header-wrap" class="clr">
<div id="header" class="container row clr">
<div id="logo" class="col span_4">
<?php if ($logotype == 'image' ) : ?>
<?php if ($logo != null ) : ?>
<a href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>" alt="<?php echo htmlspecialchars($templateparams->get('sitetitle'));?>" /></a>
<?php else : ?>
<a href="<?php echo $this->baseurl ?>/"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" border="0"></a>
<?php endif; ?><?php endif; ?>
<?php if ($logotype == 'text' ) : ?>
<a href="<?php echo $this->baseurl ?>"><?php echo htmlspecialchars($sitetitle);?></a>
<?php endif; ?>
<?php if ($sitedesc !== '' ) : ?>
<div id="site-description"><?php echo htmlspecialchars($sitedesc);?></div>
<?php endif; ?>
</div>
<?php if ($this->countModules('menu')) : ?>
<div id="navbar-wrap" class="col span_8">
<nav id="navbar">
<div id="navigation">
<jdoc:include type="modules" name="menu" style="menu" />
</div>
</nav>
</div>
<?php endif; ?>
</div>
<?php if (is_array($menuid) && !is_null($menu->getActive()) && in_array($menu->getActive()->id, $menuid, false)) { ?>
<div id="slide-wrap" class="container row clr">
<?php include "slideshow.php"; ?>
</div>
<?php } ?>
</div>
<?php $menu = $app->getMenu(); if ($menu->getActive() == $menu->getDefault()) { ?>
<div class="company"><?php jlink(); ?></div>
<?php } ?>
<div id="wrapper">
<?php if ($this->countModules('breadcrumbs')) : ?>
<div class="container row clr">
<jdoc:include type="modules" name="breadcrumbs" style="none"/>
</div>
<?php endif; ?>

<?php if ($this->countModules('user1')) : ?>
<div id="user1-wrap"><div id="user1" class="container row clr">
<jdoc:include type="modules" name="user1" style="usergrid" grid="<?php echo $user1_width; ?>" />
</div></div>
<?php endif; ?>

<div id="box-wrap" class="container row clr">
<div id="main-content" class="row span_12">
<?php if ($this->countModules('left')) : ?>
<div id="leftbar-w" class="col span_3 clr">
<div id="sidebar">
<jdoc:include type="modules" name="left" style="grid" />
</div>
</div>
<?php endif; ?>
<div id="post" class="col span_<?php echo $compwidth ?> clr">
<div id="comp-wrap">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
<?php if ($this->countModules('right')) : ?>
<div id="rightbar-w" class="col span_3 clr">
<div id="sidebar">
<jdoc:include type="modules" name="right" style="grid" />
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($this->countModules('user2')) : ?>
<div id="user2-wrap"><div id="user2" class="container row clr">
<jdoc:include type="modules" name="user2" style="usergrid" grid="<?php echo $user2_width; ?>" />
</div></div>
<?php endif; ?>
<?php include "social.php"; ?>
<div id="footer-wrap" class="container row clr" >
<?php if ($this->countModules('copyright')) : ?>
<div class="copyright">
<jdoc:include type="modules" name="copyright"/>
</div>
<?php endif; ?>
<?php if ($this->countModules('footer-menu')) : ?>
<div id="footer-nav">
<jdoc:include type="modules" name="footer-menu" style="none" />
</div>
<?php endif; ?>
</div>
</body>
</html>

Harmageddon

Zitat von Indigo66
Füge das in den head Deines Templates (index.php) hinzu.
Code
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">

Da muss ich kurz einhaken. Wenn du keinen wirklich triftigen Grund hast, deinen Nutzern das Zoomen zu verbieten, lass das user-scalable=no bitte weg! Also nur:

Code

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

Das reicht völlig aus und schränkt den Nutzer nicht unnötig ein. Wenn ich auf dem Smartphone auf einer Website nicht zoomen kann, ist sie unter Umständen komplett unbedienbar.

Zitat von WebStarJan

Danke habe ich raus genommen funktioniert immer noch nicht.

Auf http://it-ebinger.de/ sehe ich das meta-Tag jetzt überhaupt nicht mehr. Hast du beide rausgenommen?

WebStarJan

@Harmageddon

Danke für deinen Hinweis. Wenn ich es es sowie du schreibst wieder einfüge ist die Darstellung der Seite auf dem Smartphone wieder sehr zusammengewürfelt. Also für mich nicht brauchbar. Sowie es jetzt ist funktioniert es eigentlich sehr gut.

Gruß Jan