Diskuze: Media queries pro iPhone a iPad

Luke Trucino

Člen

Luke Trucino:8.10.2016 18:03

Ahoj lidi, už mám horečku z toho jak se to snažím vyřešit sám, nejde to. Už jsem tím i znechucený, takže musím požádat o pomoc prosím.

Dělám si portfolio. Mám div, 100% width a height v něm obrázek, který je static.

META
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

HTML
<div class="container-fluid cover"></div>

Na třídu cover jsem udělal všechna možná media queries co jsem našel. Včetně iPhonů a iPadů. Rozdělené na portrait a landscape. Mám totiž 5 obrázků. malý na šířku a výšku pro mobily. Střední na výškua šířku pro iPady a notebooky a large na velké monitory. Všechno mi funguje, ale iPhone nechce načíst obrázek. Přitom v přohlížeči, když si otevřu otevřít prvek stránky a dám tam iPhone 6 tak se všechno zobrazí bez problémů ale na real iphonu mám smolíka. Bude to nejspíše v zápisu Media Queries ale já už si s tím opravdu nevím rady. Pomohl by mi prosím někdo?

CSS

/* Smartphones only screen (landscape)  KDYBY TO NESLO TAK VRATIT TOHLE VSUDE ZA media  only screen and----------- */
@media (min-width : 321px) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Smartphones only screen (portrait) ----------- */
@media (max-width : 320px) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}


/* iPads only screen (landscape) ----------- */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) @media (min-width: 768px) and (max-width: 1600px) {
.cover{background:  #011325 url("imgs/covermd-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPads only screen (portrait) ----------- */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.cover{background:  #011325 url("imgs/covermd.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPad 3 (landscape) ----------- */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/covermd.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPad 3 (portrait) ----------- */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/covermd.jpg") no-repeat fixed center; background-size: 100% auto;}}


/* Desktops and laptops ----------- */
@media (min-width : 1224px) {
.cover{background:  #011325 url("imgs/covermd-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Large screens ----------- */
@media (min-width : 1824px) {
.cover{background: #011325 url("imgs/coverxl.jpg") no-repeat fixed center; background-size: 100% auto;}}


/* iPhone 4 (landscape) ----------- */
@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 4 (portrait) ----------- */
@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 5 (landscape) ----------- */
@media (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 5 (portrait) ----------- */
@media (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 6 (landscape) ----------- */
@media (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 6 (portrait) ----------- */
@media (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 6+ (landscape) ----------- */
@media (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* iPhone 6+ (portrait) ----------- */
@media (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Samsung Galaxy S3 (landscape) ----------- */
@media (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Samsung Galaxy S3 (portrait) ----------- */
@media (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Samsung Galaxy S4 (landscape) ----------- */
@media (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Samsung Galaxy S4 (portrait) ----------- */
@media (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Samsung Galaxy S5 (landscape) ----------- */
@media (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
.cover{background:  #011325 url("imgs/coverxs-wide.jpg") no-repeat fixed center; background-size: 100% auto;}}

/* Samsung Galaxy S5 (portrait) ----------- */
@media (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
.cover{background: #011325 url("imgs/coverxs.jpg") no-repeat fixed center; background-size: 100% auto;}}

Odpovědět

8.10.2016 18:03

Luke Trucino

Člen

Luke Trucino:8.10.2016 19:03

http://luke.g6.cz/ FYI tohle je ten web.

a v CSS mám ještě nad media queries fallback styly, kdyby se nenačetla media queries. nechápu teda proč to iphony nenačtou:(

.cover{
height:100vh;
width:100%;
background: #011325 url("imgs/coverxl.jpg") no-repeat fixed center; background-size: 100% auto;
}

Nahoru Odpovědět

8.10.2016 19:03

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.