Profil | Mitglieder | Registrieren | Start | Suche


PHP-Support.de » Programmierung » HTML, JavaScript & CSS » Design (Größen) für Smartphones    » Hallo Gast [Login | Registrieren]

Neues Thema | Antworten   

Autor Beitrag
smithi
Mitglied
Aktiver User


Dabei seit: 14.09.2009
Herkunft: Menden(Sauerland)
Posts: 206
     Design (Größen) für Smartphones Zitat | Bearbeiten

Hi,

wie löst Ihr die Probleme die zwischen den verschiedenen Smartphones mit der Größe usw.. eigentlich richtig?

Zur Zeit verwende ich Media Queries um verschiedene CSS Datein zu laden, die mir dann bestimmte Elemente ein oder ausblenden.

Aber gibt es da noch einen schöneren Weg?
Einen bei dem man nicht so viel Fuschen muss?

Gruß
Smithi


Bei zuviel langeweile einfach mal Basteln...
15.10.2013, 09:39 Profil | PM | E-Mail  


Neuling


Dabei seit: 01.01.1970
Herkunft:
Posts:
      Zitat | Bearbeiten

Ich mache das auch mit Media Query. Habe mein Design halt mit den neuen HTML5-Tags aufgebaut (<header>, <footer>, <nav> usw.) und je nach Displaygröße (bei mir habe ich es ab 800px) werden die Elemente auf 100% Breite gezogen, damit sie bildschirmfüllend sind und ggf. blende ich Elemente ein/aus.

Mein Anbieter bastelt für manche Anwendungen ein extra Interface mit jQuery Mobile. Finde ich etwas umständlich aber geht natürlich auch.

Andere Möglichkeiten fallen mit gerade nicht ein


15.10.2013, 10:40 Profil | PM | E-Mail  
Htaccess
Mitglied
Sehr guter User


Dabei seit: 22.08.2010
Herkunft: Deutschland
Posts: 668
      Zitat | Bearbeiten

Media Querys sind nicht ganz so verkehrt. Ich jedoch an deiner Stelle würde alles in einer CSS Datei einbauen. So löschst du auch die Anfragen die von dem Browser an den Server gesendet werden (Pagespeed optimierung)

Stichwort: Responsive Webdesign


15.10.2013, 10:57 Profil | PM | E-Mail  
DingsDaBums
Mitglied
Exzellenter User


Dabei seit: 12.09.2010
Herkunft: keine Angabe
Posts: 2354
      Zitat | Bearbeiten

Zitat:
Orginal von smithi
[...]
Aber gibt es da noch einen schöneren Weg?
Einen bei dem man nicht so viel Fuschen muss?

[...]


Was heißt hier fuschen?
Es ist zu empfehlen mit Media Queries zu arbeiten. Nur sollte man nicht unbedingt dann immer eine neue CSS Datei laden, sondern alles in die eine entsprechende Datei packen.

Der Trend geht halt von diesen extra Seiten für mobile Geräte, die dann auch meist wie eine App aussehen, eher weg in Richtung Media Queries und das geschickte ein- bzw. ausblenden, Umpositionierung und anpassen von Elementen.
Vor allem gibt es ja noch Frameworks wie Bootstrap, die einem das ganze auch nochmal zusätzlich vereinfachen.


Also ich würde bei Media Queries bleiben, bis auf den Punkt, dass dann je nach dem eine neue Datei geladen wird. Den Code der Datei würde ich direkt in die Datei packen, die diese eigentlich nachträglich lädt.

Edit:
Was für dich vielleicht noch interessant sein könnte, wäre der Meta-Tag für den Viewport:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag




Schau mal bei meinem Projekt vorbei. Vielleicht ist das ja was für dich MyStartPanel - Deine persönliche Startseite mit deinen Favoriten
Auf der Suche nach einem guten Vokabeltrainer? Vokabeltrainer Cramfire - Schnell und effektiv Vokabeln lernen

Post wurde schon 1x editiert, das letzte mal am 15.10.2013 um 16:02 von DingsDaBums
15.10.2013, 16:01 Profil | PM | E-Mail  
smithi
Mitglied
Aktiver User


Dabei seit: 14.09.2009
Herkunft: Menden(Sauerland)
Posts: 206
      Zitat | Bearbeiten

alles klar, danke für eure Hilfe.

Allerdings hatte ich mir das in verschiedene Dateien gebastelt, weil es mir einfach zu viel in einer Datei wurde.
Ich habe eine Datei mit den Styles die nicht verändert werden und 3 pro Größe.

Ich finde es übersichtlicher.
Und diese 4 oder 5 KB im Download sind doch auch nicht die Welt oder?




Bei zuviel langeweile einfach mal Basteln...
15.10.2013, 16:24 Profil | PM | E-Mail  


Neuling


Dabei seit: 01.01.1970
Herkunft:
Posts:
      Zitat | Bearbeiten

Das ist vernachlässigbar aus meiner Sicht. Die werden ja nur einmalig geladen und dann sind die im Cache.


15.10.2013, 16:39 Profil | PM | E-Mail  
DingsDaBums
Mitglied
Exzellenter User


Dabei seit: 12.09.2010
Herkunft: keine Angabe
Posts: 2354
      Zitat | Bearbeiten

Zitat:
Orginal von smithi
alles klar, danke für eure Hilfe.

Allerdings hatte ich mir das in verschiedene Dateien gebastelt, weil es mir einfach zu viel in einer Datei wurde.
Ich habe eine Datei mit den Styles die nicht verändert werden und 3 pro Größe.

Ich finde es übersichtlicher.
Und diese 4 oder 5 KB im Download sind doch auch nicht die Welt oder?




Also ich weiß ja nicht wie groß deine Seite ist, also wie viele Leute sie besuchen.

Du kannst das ganze ja auch in verschiedene Dateien schreiben, was man auch allgemein so macht, nur lässt man dann meist Tools oder kleine Skripte diese Dateien dann zu einer Datei zusammenfügen.

Der Grund ist einfach dieser, dass heutzutage nicht unbedingt die größer Dateien mehr entscheidend ist, da die Internetverbindungen im allgemeinen recht schnell sind und diese paar KBs schnell heruntergeladen haben, sondern die Anzahl der Dateien/Requests.
Das liegt daran, dass der Browser nur eine begrenzte Anzahl an Requests gleichzeitig an den Server stellen kann. So kann eine Seite, die auf 15 Dateien (Bilder, CSS, JavaScript usw.) "aufgeteilt" wurde gut 3 mal so lange zum laden brauchen, wie bei der gleichen Größe und mit nur 5 Dateien.

Aber das muss einen erst wirklich interessieren, wenn die Seite sehr oft besucht wird bzw. die Seite über 4 Sekunden braucht zum Laden (da springen dann um die 90% der Nutzer ab und gehen auf eine andere Seite).


Schau mal bei meinem Projekt vorbei. Vielleicht ist das ja was für dich MyStartPanel - Deine persönliche Startseite mit deinen Favoriten
Auf der Suche nach einem guten Vokabeltrainer? Vokabeltrainer Cramfire - Schnell und effektiv Vokabeln lernen
15.10.2013, 19:54 Profil | PM | E-Mail  
ESN-leader
Mitglied
Neuling


Dabei seit: 26.02.2017
Herkunft: Deutschland
Posts: 5
     Brauche hilfe bei Media Quarry Zitat | Bearbeiten

Hiho, ich bin immernoch an meiner kleinen Webseite dran und habe bisher mit media quarrys noch gar nicht gearbeitet ich ahbe mir einige tutorials dazu angesehen und etliche seiten gelsen. Es klingt echt simpel, doch gibt es bei mir ein kleines problem.
Ich wollte mein Drop Down ähnlich wie bei vielen seiten über ein bild (menu icon) von oben nach unten einblenden lassen.

Nun mein Problem ist dass das Icon am handy (Querformat) angezeigt wird, im sobald ich aber das Handy drehe das Icon nicht merh da ist.

ich habe das ganze so gelöst:

 PHP 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<?php
@media screen and (min-width:700px)
{
ul#navi_main li a.menubutton
{display:none;}
}

@
media screen and (max-width:650px)
{
ul#navi_main li a.menubutton
{display:block;}
}
?>


ich habe eine Datei Navi_drdo.css, allerdings habe ich aktuell (bin ganz neu was mobile ansicht angeht) noch 1. style.css 2. mobilestyle.css.
Ja ich hatte gerade eure Einwände elsen mir erschien das leichter. Kann es daran liegen?

Gruß


15.04.2017, 12:01 Profil | PM | Homepage | E-Mail  
ESN-leader
Mitglied
Neuling


Dabei seit: 26.02.2017
Herkunft: Deutschland
Posts: 5
      Zitat | Bearbeiten

Habe noch etwas umgestellt und getestet auf

http://quirktools.com/screenfly/#u=https%3A//www.esn-energieservicenord.de&w=701&h=400&s=1

meine mediaquarrys sind:

 PHP 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:

<?php
@media screen and (min-width:800px)
{
#h1schrift
{
display:block;
}
}

@
media screen and (max-width:750px)
{

#h1schrift
{
font-size:0px;
display:none;
}

.
content_right_main
{
display:none;
}

.
content_left_main
{
font-size:87%;
}

#navi_main_container
{
background#fff url(images/menu.png) no-repeat;
float:left;
}
}
?>


Weiterhin das Problem, alles läuft bei richig ab 750px bis 701px doch ab 700px verschwindet wider das Menu icon und das soll ja niht, denn auch 700 oder 400 oder 1 px ind kleicher als 750 (max-width:750px)

woran kann das liegen?


17.04.2017, 02:43 Profil | PM | Homepage | E-Mail  
surri
Mitglied
Neuling


Dabei seit: 04.06.2017
Herkunft: NRW
Posts: 5
      Zitat | Bearbeiten

Das Menu-Icon verschwindet bis 750px und ab 751px ist es weg.

Wie kommst Du darauf das es ab 700px schon verschwindet?


04.06.2017, 20:45 Profil | PM | E-Mail  
Htaccess
Mitglied
Sehr guter User


Dabei seit: 22.08.2010
Herkunft: Deutschland
Posts: 668
      Zitat | Bearbeiten

Mobile First

 PHP 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Versuche mal diese Media Queries zu verwenden. Wenn du aber im vollen Umfang mit Media Queries bzw. Responsive Webdesign arbeiten möchtest, dass würde ich auf das CSS-Framework Twitter Bootstrap (Link) oder ZURB Foundation (Link) zurückgreifen


17.09.2017, 14:42 Profil | PM | E-Mail  
Seiten (1):  1 
PHP-Support.de » Programmierung » HTML, JavaScript & CSS » Design (Größen) für Smartphones   

Neues Thema | Antworten   


Powered by Command Board 1.0 - Beta 2.0 © 2004-08 PHP-Einfach | Impressum | Datenschutz