Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
/* -----------------------------------------------
---- Base ----------------------------------------
------------------------------------------------*/
/* Basic-Styles - e. g. for 960/1.000 Pixel Wrap */
/* -----------------------------------------------
---- Media Queries -------------------------------
------------------------------------------------*/
/* Mobile/Smartphone - Portrait-Modus */
@media
only screen and (min-width: 320px) and (max-width: 479px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
}
/* Mobile/Smartphone - Landscape-Modus */
@media
only screen and (min-width: 480px) and (max-width: 767px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
}
/* Mobile/Tablets - Portrait-Modus */
@media
only screen and (min-width: 768px) and (max-width: 959px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}
/* New iPad - iPd 3 - Retina Display */
@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
}
/* Desktops - Viewport 1.300+ Pixel */
@media
only screen and (min-width: 1300px) {
}
Gerne auch per PN.
Kann auch gerne meinen HTML Code per Mail oder anderweitig zusenden, wenn dies hilfreich ist - mir zu helfen.
Den Link von SpiceLab ... hatte ich bereits vor Tagen im Netz gefunden.
Als sinnvoll hat sich hingegen erwiesen, das responsive Design dem Inhalt anzupassen. Dabei wird geschaut bei welchen Fensterbreiten sich Probleme im Layout ergeben und diese dann korrigiert.
MrMurphy
So ist für die Informationen in den iFrames kein eigener head-Bereich und kein Doctype vorgesehen.
Als wichtigster Grundsatz gilt, dass user-eigene CSS-Angaben sich nicht auf das Ebay-Layout auswirken dürfen, also den Angaben die Ebay auf der Webseite bereitstellt.