Media screen queries shown on inspect but not on actual device

up vote
0
down vote

favorite

I've tried googling and can't seem to get this right.

I've made the media screen query codes & viewport for iPhone 7 plus but it just won't appear on my device. I've tried inspecting on Chrome and it appears as it should. This is the code:

@media screen and (height:736px) and (width:414px)improve this question

edited 14 hours ago

Lithilion

4831615

asked 15 hours ago

F A

New contributor

1

1. It's not related with PHP - change tags. 2. Can you provide SO Snippet? Now you have syntax error in your CSS
– Justinas
15 hours ago

@media screen and (height:736px) , screen and (width:414px) div.banner height:600px; background-image:url(../../assets/img/mobilehome.jpg)!important; This must be the proper format of css. Don't use important, use max/min height and width.
– Ashish
14 hours ago

In the code above, you're missing a in the end. Dunno if its messing something else.
– Pedro Serpa
14 hours ago

Sorry I didnt paste the code fully. This is the snippet jsfiddle.net/teddbundy/t1yn84w0/8 (removed the previous since I kinda use the same picture so ppl wont be able to tell the difference)
– F A
13 hours ago

add a comment |

up vote
0
down vote

favorite

I've tried googling and can't seem to get this right.

I've made the media screen query codes & viewport for iPhone 7 plus but it just won't appear on my device. I've tried inspecting on Chrome and it appears as it should. This is the code:

@media screen and (height:736px) and (width:414px)improve this question

edited 14 hours ago

Lithilion

4831615

asked 15 hours ago

F A

New contributor

1

1. It's not related with PHP - change tags. 2. Can you provide SO Snippet? Now you have syntax error in your CSS
– Justinas
15 hours ago

@media screen and (height:736px) , screen and (width:414px) div.banner height:600px; background-image:url(../../assets/img/mobilehome.jpg)!important; This must be the proper format of css. Don't use important, use max/min height and width.
– Ashish
14 hours ago

In the code above, you're missing a in the end. Dunno if its messing something else.
– Pedro Serpa
14 hours ago

Sorry I didnt paste the code fully. This is the snippet jsfiddle.net/teddbundy/t1yn84w0/8 (removed the previous since I kinda use the same picture so ppl wont be able to tell the difference)
– F A
13 hours ago

add a comment |

up vote
0
down vote

favorite

I've tried googling and can't seem to get this right.

I've made the media screen query codes & viewport for iPhone 7 plus but it just won't appear on my device. I've tried inspecting on Chrome and it appears as it should. This is the code:

@media screen and (height:736px) and (width:414px)

1

1. It's not related with PHP - change tags. 2. Can you provide SO Snippet? Now you have syntax error in your CSS
– Justinas
15 hours ago

@media screen and (height:736px) , screen and (width:414px) div.banner height:600px; background-image:url(../../assets/img/mobilehome.jpg)!important; This must be the proper format of css. Don't use important, use max/min height and width.
– Ashish
14 hours ago

In the code above, you're missing a in the end. Dunno if its messing something else.
– Pedro Serpa
14 hours ago

Sorry I didnt paste the code fully. This is the snippet jsfiddle.net/teddbundy/t1yn84w0/8 (removed the previous since I kinda use the same picture so ppl wont be able to tell the difference)
– F A
13 hours ago

1. It's not related with PHP - change tags. 2. Can you provide SO Snippet? Now you have syntax error in your CSS
– Justinas
15 hours ago

@media screen and (height:736px) , screen and (width:414px) div.banner height:600px; background-image:url(../../assets/img/mobilehome.jpg)!important;

This must be the proper format of css. Don't use important, use max/min height and width.
– Ashish
14 hours ago

@media screen and (height:736px) , screen and (width:414px) div.banner height:600px; background-image:url(../../assets/img/mobilehome.jpg)!important;

This must be the proper format of css. Don't use important, use max/min height and width.
– Ashish
14 hours ago

In the code above, you're missing a } in the end. Dunno if its messing something else.
– Pedro Serpa
14 hours ago

Sorry I didnt paste the code fully. This is the snippet jsfiddle.net/teddbundy/t1yn84w0/8 (removed the previous since I kinda use the same picture so ppl wont be able to tell the difference)
– F A
13 hours ago

add a comment |

1 Answer
1

active

oldest

votes

up vote
-1
down vote

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)

Credits: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

edited 14 hours ago

answered 14 hours ago

Pedro Serpa

872

Better mention the another answer of stackoverflow link. Also the op has height for specific reasons.
– Ashish
14 hours ago

Although this code might (or might not) work, a good answer should always contain an explanation of what the code does and how it solves the question.
– BDL
14 hours ago

Sorry, edited the answer with the source credits. Concerning the explanation, if one would really target one device, using css media queries isn't just enough, however these devices work in this range (and probably a dozen more out there). I realized the height issue, so I'm testing for a max-height rule but this will probably get the op into trouble. So I guess javascript will probably be the way to go.
– Pedro Serpa
13 hours ago

Hi thanks for the reply. I've tried this code but it doesnt work. Code appears in Inspect element but when I try to view on actual device, the picture stays the same. This screenshot shows that the code actually works in inspect imgur.com/a/R05gboM & this is my snippet jsfiddle.net/teddbundy/90jebfut.
– F A
13 hours ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

F A is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203554%2fmedia-screen-queries-shown-on-inspect-but-not-on-actual-device%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
-1
down vote

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)

Credits: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

edited 14 hours ago

answered 14 hours ago

Pedro Serpa

872

Better mention the another answer of stackoverflow link. Also the op has height for specific reasons.
– Ashish
14 hours ago

Although this code might (or might not) work, a good answer should always contain an explanation of what the code does and how it solves the question.
– BDL
14 hours ago

Sorry, edited the answer with the source credits. Concerning the explanation, if one would really target one device, using css media queries isn't just enough, however these devices work in this range (and probably a dozen more out there). I realized the height issue, so I'm testing for a max-height rule but this will probably get the op into trouble. So I guess javascript will probably be the way to go.
– Pedro Serpa
13 hours ago

Hi thanks for the reply. I've tried this code but it doesnt work. Code appears in Inspect element but when I try to view on actual device, the picture stays the same. This screenshot shows that the code actually works in inspect imgur.com/a/R05gboM & this is my snippet jsfiddle.net/teddbundy/90jebfut.
– F A
13 hours ago

add a comment |

up vote
-1
down vote

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)

Credits: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

edited 14 hours ago

answered 14 hours ago

Pedro Serpa

872

Better mention the another answer of stackoverflow link. Also the op has height for specific reasons.
– Ashish
14 hours ago

Although this code might (or might not) work, a good answer should always contain an explanation of what the code does and how it solves the question.
– BDL
14 hours ago

Sorry, edited the answer with the source credits. Concerning the explanation, if one would really target one device, using css media queries isn't just enough, however these devices work in this range (and probably a dozen more out there). I realized the height issue, so I'm testing for a max-height rule but this will probably get the op into trouble. So I guess javascript will probably be the way to go.
– Pedro Serpa
13 hours ago

Hi thanks for the reply. I've tried this code but it doesnt work. Code appears in Inspect element but when I try to view on actual device, the picture stays the same. This screenshot shows that the code actually works in inspect imgur.com/a/R05gboM & this is my snippet jsfiddle.net/teddbundy/90jebfut.
– F A
13 hours ago

add a comment |

up vote
-1
down vote

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)

Credits: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

edited 14 hours ago

answered 14 hours ago

Pedro Serpa

872

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)

Credits: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

edited 14 hours ago

answered 14 hours ago

Pedro Serpa

872

edited 14 hours ago

answered 14 hours ago

Pedro Serpa

872

answered 14 hours ago

Pedro Serpa

872

answered 14 hours ago

Pedro Serpa

872

Better mention the another answer of stackoverflow link. Also the op has height for specific reasons.
– Ashish
14 hours ago

Although this code might (or might not) work, a good answer should always contain an explanation of what the code does and how it solves the question.
– BDL
14 hours ago

Sorry, edited the answer with the source credits. Concerning the explanation, if one would really target one device, using css media queries isn't just enough, however these devices work in this range (and probably a dozen more out there). I realized the height issue, so I'm testing for a max-height rule but this will probably get the op into trouble. So I guess javascript will probably be the way to go.
– Pedro Serpa
13 hours ago

Hi thanks for the reply. I've tried this code but it doesnt work. Code appears in Inspect element but when I try to view on actual device, the picture stays the same. This screenshot shows that the code actually works in inspect imgur.com/a/R05gboM & this is my snippet jsfiddle.net/teddbundy/90jebfut.
– F A
13 hours ago

add a comment |

Better mention the another answer of stackoverflow link. Also the op has height for specific reasons.
– Ashish
14 hours ago

Although this code might (or might not) work, a good answer should always contain an explanation of what the code does and how it solves the question.
– BDL
14 hours ago

Sorry, edited the answer with the source credits. Concerning the explanation, if one would really target one device, using css media queries isn't just enough, however these devices work in this range (and probably a dozen more out there). I realized the height issue, so I'm testing for a max-height rule but this will probably get the op into trouble. So I guess javascript will probably be the way to go.
– Pedro Serpa
13 hours ago

Hi thanks for the reply. I've tried this code but it doesnt work. Code appears in Inspect element but when I try to view on actual device, the picture stays the same. This screenshot shows that the code actually works in inspect imgur.com/a/R05gboM & this is my snippet jsfiddle.net/teddbundy/90jebfut.
– F A
13 hours ago

Better mention the another answer of stackoverflow link. Also the op has height for specific reasons.
– Ashish
14 hours ago

Although this code might (or might not) work, a good answer should always contain an explanation of what the code does and how it solves the question.
– BDL
14 hours ago

Sorry, edited the answer with the source credits. Concerning the explanation, if one would really target one device, using css media queries isn't just enough, however these devices work in this range (and probably a dozen more out there). I realized the height issue, so I'm testing for a max-height rule but this will probably get the op into trouble. So I guess javascript will probably be the way to go.
– Pedro Serpa
13 hours ago

Hi thanks for the reply. I've tried this code but it doesnt work. Code appears in Inspect element but when I try to view on actual device, the picture stays the same. This screenshot shows that the code actually works in inspect imgur.com/a/R05gboM & this is my snippet jsfiddle.net/teddbundy/90jebfut.
– F A
13 hours ago

add a comment |

F A is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

F A is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt