ComputerBase Menü
Aktuelles

Test, ob user agent ein mobiles Device ist, Update?

Deshalb macht man das nicht anhand von Geräten, sondern anhand der Auflösung über Media Queries.

Das ist so einfach und du musst keine zwei Codebases/Files aktualisieren.

Bei deiner Seite würde wahrscheinlich schon ein Breakpoint ausreichen.
 
@netzgestaltung Wie meinst du das genau? Erkennt das Script, ob es ein iPad ist oder nicht? Heißt, lädt die Seite das mobile Design oder das für Desktop?

Ist dies bei ALLEN Tablets so? Sprich, mein Code erkennt nur Hanyds, aber keine Tablets?

Wäre nicht schlimm...weil ich dann einfach die andere Version anpasse.

@mastaqz Danke! Nur unterscheidet sich nicht nur die CSS, sondern es gibt unterschiedliche Content PHPs. Desktop hat z.B. eine Tabelle mit drei Spalten, Handy reiht alles untereinander....und ich weiß nicht, wie es automatisiert geht, dass, wenn nicht genug Platz ist, es untereinander angeordnet wird.
 
Man kann recht simpel ein Tabellenlayout mit Flexbox machen.

Auf deiner Poesie-Seite bspw. einen Flex-Container mit 3 Kolumnen.
Und dann in jeder einzelnen Kolumne einen Flex-Container mit x Reihen.

Das ist vor allem langfristig sinnvoller, weil du aktuell an mindestens 2 Sachen immer arbeiten musst.

Aber gut, ist nur eine Empfehlung, an sich sieht die Seite ja schon ordentlich aus.
 
also mit leider nein meinte ich, das ich es leider nicht weis.

mit flexbox ist das einfach:
HTML: 
<div>
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

CSS: 
div{
  display:flex;
  flex-flow:row wrap;
}
div div{
  display:block;
  min-width:320px;
  max-width:400px;
}

https://jsfiddle.net/hd4kLpbs/

dafür ist vermutlich nicht mal ein media query breakpoint nötig.
 
Danke! Wo schreib ich dann den CSS-Teil rein? Wenn ich ihn einfach in die normale CSS schreibe, werden einige Teile nicht mehr korrekt angezeigt.

Einfach in die Poesie-Sektion unter <link rel="stylesheet" type="text/css" href="style_con.css"> ein <link rel="stylesheet" type="text/css" href="flex.css"> ?

Ok, geht auch nicht, weil es dann die Social Media-Sachen durcheinander bringt. Ich passe lieber die iPad-Version an, ist einfacher.
 
Kennt jemand http://mobiledetect.net/ ? Das würde genau das machen, was ich brauche...erkennt iPad und Tablets allgemein. Es gibt Erklärungen dazu, aber ich bekomme es einfach nicht hin...es passiert nichts, es wird nichts umgeleitet. 100 Versionen probiert.

Kennt es jemand und weiß, wie ich es installiere? Ich bräuchte nur ein "ist mobile oder tablet, lade mobile Seite"

Hab auch gelesen, dass sowohl das eine Script von mir als auch mobiledetect teilweise nicht funktionieren, da sich iPad und iPhone sich als Desktopbrowser ausgeben usw.
 
Zuletzt bearbeitet:
LeanderAT schrieb:
Ok, geht auch nicht, weil es dann die Social Media-Sachen durcheinander bringt. Ich passe lieber die iPad-Version an, ist einfacher.
Zum Vergrößern anklicken....

also ich hab nur ein simples beispiel ohne bezug zu deiner seite gebracht.

die "div" selectoren müssen natürlich zu den elementen passen, die "tabelarisch" dargestellt werden.
wenn das zb keine `div`s sind ist natürlich ein anderer selector zu wählen.

sprich: das CSS von oben passt zu dem HTML von oben. dein CSS muß zu deinem HTML passen.
 
Ok, danke. Hast du noch eine Idee wegen mobiledirect?
 
LeanderAT schrieb:
Kennt jemand http://mobiledetect.net/ ?
Zum Vergrößern anklicken....
zunächst geht es um diese datei, die muß auf deinem webserver liegen
https://github.com/serbanghita/Mobile-Detect/blob/master/Mobile_Detect.php (klick auf raw und dann speichern unter)

also ich würde mal ganz leer beginnen, zb in einer extra datei
PHP: 
<?php
  /* ersetze "pfad/zu/" mit dem relativen pfad zur datei */
  require_once "pfad/zu/Mobile_Detect.php";
  $detect = new Mobile_Detect;

  // Any mobile device (phones or tablets).
  if ( $detect->isMobile() ) {
   echo 'ist mobile';
  }

  // Any tablet device.
  if ( $detect->isTablet() ) {
   echo 'ist tablet';
  }
 
  // Exclude tablets.
  if ( $detect->isMobile() && !$detect->isTablet() ) {
   echo 'ist mobile aber kein tablet';
  }
 
  // Check for a specific platform with the help of the magic methods:
  if ( $detect->isiOS() ) {
   echo 'ist iphone oder ipad iOS';
  }
  if ( $detect->isAndroidOS() ) {
   echo 'ist android';
  }

?>

und dann mal schaun was erscheint - das gibt dir dann erkenntnisse über die funktionsweise.
 
Danke!

Ja, require_once "Mobile_Detect.php";

Hab alle Dateien im selben Ordner außer Grafiken und Fotos.

Jetzt gehts! Ich weiß nicht, warum.

Habe jetzt:
<?php
require_once "Mobile_Detect.php";
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {
header("Location: m_index_de_php");
}
?>

Ich hatte vorher:

<?php
require_once "Mobile_Detect.php";
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) { header("Location: m_index_de.php");

}

?>

und es passiert nichts!


Sind doch beide identisch? Ich kapier es nicht!

PS Wie ist der Code für "Nichts machen?" Kann ich das so lassen? "Wenn schon auf mobile Seite und Gerät = mobile dann nichts tun, falls mobile Seite im Desktop aufgerufen wird, dann leite zu normalem desktop index um". Passt das so?

<?php
require_once "Mobile_Detect.php";
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {

}

else{
header("Location: index_de.php");
}

?>
 
Zuletzt bearbeitet:
Wenn du eine abfrage einfach umkehren magst und den "true" zweig nicht benötigst reicht deine angabe.
Du kannst es noch etwas kürzen mit dem Rufzeichen vor !$detect->isMobile():

PHP: 
<?php
  require_once "Mobile_Detect.php";
  $detect = new Mobile_Detect;

  // Any other then mobile devices (desktop).
  if ( !$detect->isMobile() ) {
    header("Location: index_de.php");
  }
?>
 
Danke! Hast du ne Idee, wieso mein Script oben nicht ging? Vielleicht, weil ich UTF 8 BOM eingestellt hatte?
 
  • Gefällt mir
Reaktionen: Hayda Ministral
Leider nein. Aber ich finde die Mobile-Test Funktion im Firefox ausgezeichnet.

Zu erreichen mit Strg+Shift+M

Hier lässt sich auch der User Agent manipulieren

Ipad und andere sind voreingestellt.
 
Danke! Ich hatte nämlich das Problem, dass es mit dem PC und Emulator gut aussah...aber auf dem iPad war das Menü schwarz...und ich dachte, die require-Funktion würde dort nicht funktionieren.

Es hat sich dann herausgestellt, dass background-color fehlte...iPad hat es als Schwarz interpretiert, am PC wars weiß...hab es nachgereicht -> es jetzt geht :)

Hab dann auch noch hinbekommen, dass bei genug Breite drei Spalten angezeigt werden, sonst zwei oder eine. :)

www.seelenpuls.at/poesie_de.php

Ich finde diese Seite zum Testen gut:

http://responsivetesttool.com/

Danke für deine Hilfe! :)
 
gut:
CSS: 
#autotable {
  display: flex;
  flex-flow: row wrap;
}

für mehr geräte kompatibilität kannst du das noch in https://autoprefixer.github.io/ eingeben und erhällst so genannte vendor-prefixe, das ist aber umstritten:
https://stackoverflow.com/questions...r-prefix-although-the-specs-clearly-says-dont

ahja noch etwas:

der wert eines "id" attributs darf pro html dokument (das beim browser ankommt) nur einmal vergeben werden.
daher wäre es nötig, überall wo id="autotable" dieses auf class="autotable" zu ändern und im css #autotable zu .autotable

details: https://wiki.selfhtml.org/wiki/HTML/Universalattribute#id

es ist zwar mmn nicht nötig alles w3c konform zu schreiben, aber der validator hilft auch, weitere fehler zu finden:
https://validator.w3.org/check?uri=...(detect+automatically)&doctype=Inline&group=0
 
Zuletzt bearbeitet:
Ok, danke!

Ich hab noch ein Problem, zu dem ich keine Lösung finde:

Wenn ich am Anfang des Content einen Link habe und darunter kommt eine Tabelle mit einem <p> jeweils, so macht es nichts, ob sich der Inhalt auf der Breite ausgeht oder ob z.B. eine der drei Spalten nach unten wandert.

ABER: Ist auf der Seite (Content) kein Link zu sehen, sondern beginnt gleich OHNE einem <p>, so ist die Tabelle auf der richtigen Höhe, wenn sich sich von der Breite her ausgeht. Wandert aber eine Spalte nach unten, hat sie keinen Abstand zu den vorherigen. Setze ich aber zum Inhalt der dritten Spalte ein <p>, so ist diese dann weiter unten als der Rest. Setze ich bei allen drei Spalten ein <p>, so funktioniert alles, NUR fängt der Inhalt der Seite nicht gleich oben an wie alle andere, sondern nach unten versetzt durch das <p>.

Ich hab keine Ahnung, wie ich das lösen kann. Extra irgendwas einbauen, das ich nicht will, nur um dann ein einheitliches <p> verwenden zu können, ist ja auch doof.

Diesen Aufbau habe ich:

<p><div ID="...">
<div ID="... DIV"><p</div>
<div ID="... DIV">2</div>
<div ID="...DIV">3</div>
</div>

CSS:

div{
display:flex;
flex-flow:row wrap;
}
div div{
display:block;
min-width:320px;
max-width:400px;
}

Normal ist es so:

"Es war einmal ein Inhalt..." -> alles ok

Mit Tabelle, die nach unten wandert und Text vorher:

"Es war einmal ein Inhalt"
<P>Tabelle... -> wandert sie, ist alles ok wegen <p>

Aber wenn gleich die Seite OHNE "Es war einmal ein Inhalt" beginnt mit

Tabelle

dann fehlt das <p>. Hab ich das <p>, also ein:

<P>Tabelle

beginnt der Content zu weit unten.

Hab ich aber:

Tabelle

so hat der runterwandernde Teil der Tabelle keinen Abstand zu oben...setze ich aber in jede Spalte ein <p>, so ist es nicht auf gleicher Höhe.

Weiß nicht, ob du dich auskennst. Ich sitz seit Stunden und bin schon ziemlich hinüber. :)
 
Also so kann ichs nicht ganz nachvollziehen. du könntest ein beispiel hier eingeben, dann kann man dran arbeiten: https://jsfiddle.net/ oder du arbeitest an der codedarstellung deiner beiträge

generell ist es so, das ein paragraph, also <p></p> keine "block-level-elemente" beinhalten darf, also sind in einem <p></p> kein <div></div> oder <table></table> erlaubt.

das kann (und wird es vermutlich bei tabellen) auch noch zu side-effekten führen, daher würde ich das mal zunächst bereinigen.

wenn du einen anonymen block verwenden magst ist DIV das richtige, P steht für textabsätze und TABLE sollte immer für tabellarische Inhalte genutzt werden.
 
Beispiel: Es sind drei Spalten...werden nebeneinander angezeigt. Ist zu wenig Platz, wandern die Spalten nach unten, haben aber wegen des <P>s vor dem <b>xxx</b> Abstand nach oben! Das <P> ist immer da, damit zum Link "Information" Abstand ist.

Habe ich aber KEINEN Link vor einer Tabelle, sondern beginne ich die Tabelle gleich im Content, so steht nirgends ein <P>. Und wandern Spalten nach unten, haben sie keinen Abstand zu den oberen Spalten.

Hier der Code MIT dem Abstand wegen Link vor der Tabelle:

Code: 
<div id="content"><A HREF="m_m_poesie_info_de.php" class="class1">Information</A>

  <div id="autotable">
   <div id="autotable div"><p><b>Neue Songtexte:</b><p><a href="m_poesie_gedicht01_de.php" class="class1">Genug</a><br>
            <a href="m_poesie_gedicht02_de.php" class="class1">Meer der Einsamkeit</a><br>
            <a href="m_poesie_gedicht03_de.php" class="class1">Eine Reise ins Ich</a><br>
            <a href="m_poesie_gedicht04_de.php" class="class1">Farbenfluss</a><br>
            <a href="m_poesie_gedicht05_de.php" class="class1">Tiefer</a><br>
            <a href="m_poesie_gedicht06_de.php" class="class1">Mutter Natur</a><br>
            <a href="m_poesie_gedicht07_de.php" class="class1">Frucht und Fäulnis</a><br>
            <a href="m_poesie_gedicht08_de.php" class="class1">Kalt</a><br>
            <a href="m_poesie_gedicht09_de.php" class="class1">SeelenPuls</a><br>
            <a href="m_poesie_gedicht10_de.php" class="class1">Auf den Moment</a><br>
            <a href="m_poesie_gedicht11_de.php" class="class1">Feuertanz</a></div>
   <div id="autotable div"><a name="gotoged"></a><p><b>Ausgesuchte Gedichte:</b><p><a href="m_poesie_gedicht22_de.php" class="class1">Versickernd</a><br>
             <a href="m_poesie_gedicht25_de.php" class="class1">Küche</a><br>             
            <a href="m_poesie_gedicht31_de.php" class="class1">Zedernholz</a><br>
             <a href="m_poesie_gedicht30_de.php" class="class1">Lange Sommertage</a><br>
             <a href="m_poesie_gedicht34_de.php" class="class1">Keine Angst</a><br>
             <a href="m_poesie_gedicht33_de.php" class="class1">Was lange währt</a><br>
             <a href="m_poesie_gedicht32_de.php" class="class1">Narben der Vergangenheit</a><br>
             <a href="m_poesie_gedicht24_de.php" class="class1">An die Ferne</a><br>
             <a href="m_poesie_gedicht21_de.php" class="class1">Mit Feder und Wein</a><br>
             <a href="m_poesie_gedicht23_de.php" class="class1">Ein Stern</a><br>
            <a href="m_poesie_gedicht26_de.php" class="class1">Mit all' dem...</a><br>
            <a href="m_poesie_gedicht27_de.php" class="class1">Das leblose Landhaus</a><br>
            <a href="m_poesie_gedicht28_de.php" class="class1">He che suna mielo</a><br>
            <a href="m_poesie_gedicht29_de.php" class="class1">Meine Welt?</a><br></div>
   <div id="autotable div"><a name="gotoneb"></a><p><b>Album Nebelleben:</b><p><a href="m_poesie_gedicht12_de.php" class="class1">Hinaus in die Kälte</a><br>
            <a href="m_poesie_gedicht13_de.php" class="class1">Schatten der Vergangenheit</a><br>
            <a href="m_poesie_gedicht14_de.php" class="class1">Den Moment, halt' ihn fest</a><br>
            <a href="m_poesie_gedicht15_de.php" class="class1">Auf der Bühne</a><br>
            <a href="m_poesie_gedicht16_de.php" class="class1">Leben</a><br>
            <a href="m_poesie_gedicht17_de.php" class="class1">Du, der Ozean</a><br>
            <a href="m_poesie_gedicht18_de.php" class="class1">Freigeist</a><br>
            <a href="m_poesie_gedicht19_de.php" class="class1">Kunst Unsterblichkeit</a><br>
            <a href="m_poesie_gedicht20_de.php" class="class1">Long live Tartosgardh</a></div>
</div>
          

<p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" id="toparrow" border="0"></a>

</div><!--Ende content-->

...

und so wäre der Code, wenn die Tabelle direkt im Content ohne Link vorher kommen würde:
Es fehlt das "<A HREF="m_m_poesie_info_de.php" class="class1">Information</A>" am Anfang und das <P> vor drei <B>xxx</b>

Code: 
[CODE]<div id="content">
  <div id="autotable">
   <div id="autotable div"><b>Neue Songtexte:</b><p><a href="m_poesie_gedicht01_de.php" class="class1">Genug</a><br>
            <a href="m_poesie_gedicht02_de.php" class="class1">Meer der Einsamkeit</a><br>
            <a href="m_poesie_gedicht03_de.php" class="class1">Eine Reise ins Ich</a><br>
            <a href="m_poesie_gedicht04_de.php" class="class1">Farbenfluss</a><br>
            <a href="m_poesie_gedicht05_de.php" class="class1">Tiefer</a><br>
            <a href="m_poesie_gedicht06_de.php" class="class1">Mutter Natur</a><br>
            <a href="m_poesie_gedicht07_de.php" class="class1">Frucht und Fäulnis</a><br>
            <a href="m_poesie_gedicht08_de.php" class="class1">Kalt</a><br>
            <a href="m_poesie_gedicht09_de.php" class="class1">SeelenPuls</a><br>
            <a href="m_poesie_gedicht10_de.php" class="class1">Auf den Moment</a><br>
            <a href="m_poesie_gedicht11_de.php" class="class1">Feuertanz</a></div>
   <div id="autotable div"><a name="gotoged"></a><b>Ausgesuchte Gedichte:</b><p><a href="m_poesie_gedicht22_de.php" class="class1">Versickernd</a><br>
             <a href="m_poesie_gedicht25_de.php" class="class1">Küche</a><br>             
            <a href="m_poesie_gedicht31_de.php" class="class1">Zedernholz</a><br>
             <a href="m_poesie_gedicht30_de.php" class="class1">Lange Sommertage</a><br>
             <a href="m_poesie_gedicht34_de.php" class="class1">Keine Angst</a><br>
             <a href="m_poesie_gedicht33_de.php" class="class1">Was lange währt</a><br>
             <a href="m_poesie_gedicht32_de.php" class="class1">Narben der Vergangenheit</a><br>
             <a href="m_poesie_gedicht24_de.php" class="class1">An die Ferne</a><br>
             <a href="m_poesie_gedicht21_de.php" class="class1">Mit Feder und Wein</a><br>
             <a href="m_poesie_gedicht23_de.php" class="class1">Ein Stern</a><br>
            <a href="m_poesie_gedicht26_de.php" class="class1">Mit all' dem...</a><br>
            <a href="m_poesie_gedicht27_de.php" class="class1">Das leblose Landhaus</a><br>
            <a href="m_poesie_gedicht28_de.php" class="class1">He che suna mielo</a><br>
            <a href="m_poesie_gedicht29_de.php" class="class1">Meine Welt?</a><br></div>
   <div id="autotable div"><a name="gotoneb"></a><b>Album Nebelleben:</b><p><a href="m_poesie_gedicht12_de.php" class="class1">Hinaus in die Kälte</a><br>
            <a href="m_poesie_gedicht13_de.php" class="class1">Schatten der Vergangenheit</a><br>
            <a href="m_poesie_gedicht14_de.php" class="class1">Den Moment, halt' ihn fest</a><br>
            <a href="m_poesie_gedicht15_de.php" class="class1">Auf der Bühne</a><br>
            <a href="m_poesie_gedicht16_de.php" class="class1">Leben</a><br>
            <a href="m_poesie_gedicht17_de.php" class="class1">Du, der Ozean</a><br>
            <a href="m_poesie_gedicht18_de.php" class="class1">Freigeist</a><br>
            <a href="m_poesie_gedicht19_de.php" class="class1">Kunst Unsterblichkeit</a><br>
            <a href="m_poesie_gedicht20_de.php" class="class1">Long live Tartosgardh</a></div>
</div>
          

<p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" id="toparrow" border="0"></a>

</div><!--Ende content-->

Solange alles in einer Reihe dargestellt wird mit genug Platz, ist alles ok! Dann fangen alle Spalten direkt an:

ABC
...aber sobald was runterwandert, sieht es so aus:

AB
C

aussehen soll es aber so:

AB
x
C

wobei x ein Abstand durch <P> ist.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

K
Heruntergefallene 2.5'' HDD noch verwenden?
Antworten
10
Aufrufe
825
Kurt Blahovec
K
gidra
Batch Translit-Script
Antworten
4
Aufrufe
909
gidra
gidra
Piktogramm
KlackKlackKlack macht die Seagate Platte
Antworten
14
Aufrufe
2.166
Bigeagle
Bigeagle
B
Powershell Encodingproblem
Antworten
19
Aufrufe
7.770
andy_m4
andy_m4
S
Gaming-PC für bis zu 3.000 €
Antworten
18
Aufrufe
1.439
Deathangel008
Deathangel008
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz