Develop Reference

Mobile view issues with iphones

I have an issue with mobile views on iphones. On android devices everything works fine. I also tried to set the specific width and height for iphone xr but it still doesn't work.
I have tested my website in google mobile friendly test and everything was ok.
This is my code that works perfectly for android devices with max-width 700px:
body {
background-image: url('/wp-content/uploads/2020/08/ass-1.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#media screen and (max-width: 700px) {
body {
background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
background-position: fixed;
background-repeat: no-repeat;
background-size: cover;
}

iPhone XR having resolution max-width:414px
More info : https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/
#media screen and (min-width: 414px) {
body {
background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
background-position: fixed;
background-repeat: no-repeat;
background-size: cover;
}

Why does my website have different view in Android and IOS?

This is how my website looks like in an iOS browser.
IOS view
But when my friend opens my website in an Android browser it looks horrible: Like this Picture
Please suggest some advice what to do with this kind of problem.
Here is my background code.
body {
background-image: url(images/contact.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color:#245528;
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
background-size: cover;
}
}

Resizing Background on ipad/tablet

All currently developing this forum/site:
http://nfldynasty.boards.net/
Lots to finish in terms of content, however I'm currently having some problems resizing the various backgrounds on mobile devices such as ipad and Samsung android tablet etc.
All seems to work well when viewing on laptop via both google chrome and internet explorer.
The code I'm using is as follows
body {
-webkit-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html { height: 100%; width: 100%; }
I cannot seem to work out a way of adjusting the background size on ipad/tablet etc without either changing this on internet explorer to changing the size of the text boxes. i.e. when I change the html tab from 100% to say 75% the background remains unaltered but the size of the forum categories reduces
If I remover the final html line then on all devices the image is distorted when zooming in and out on the text.
Any ideas?

You can try using this for smaller screens:
body {
background-color: #000;
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
}

Responsive works on Iphone, but not on Samsung-phones

/* CSS Dokument */
body{
background-image: url('baggrund.jpg') !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width: 767px) {
body{
background-image: url('baggrund.jpg') !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
}
I have added the above code to my CSS document and with the help from bootstrap my website will be responsive.
But the funny thing is, that my responsive works fine on iPhone, but not on Samsung (Tried on S3/S5 mini).
I'm really glad for this simple solution, so I would like to keep it this way.
Mobiletest.me doesn't show a correct screen. It's otherwise when you are doing it physically.
My website is: http://odsgaardklausen.dk/DBS/DBS.php

I solved the problem myself by adding to the CSS :
html {min-height:100%;}

Why does this CSS not work for Chrome on Android but works everywhere else?

This really puzzles me. I want to have pic.jpg be static in the background (not move when scrolling) and that it won't stretch.
It works on every browser (i.e. Chrome, Safari, Firefox) except Chrome on Android (it even works on Android original browser)
body{
background-color: transparent !important;
background-image: url(<%= asset_path "pic.jpg" %>);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Chrome for Android renders it as pic.jpg being halfway up in the screen, not on the entire page and doesn't stay static on scroll..
I can't reproduce it on jsfiddle, I also try to debug it with my Android phone and nothing seems to help.
Isn't this the way to create the background image?

I do not wanna be cruel but this issue has been reported approximately 4 years ago
http://code.google.com/p/android/issues/detail?id=3301
most recent response can help I guess:
In my experiments with Android, I noticed that all the other DIVs within the body behaved correctly, including centering, so I moved image to another DIV and it worked.
Funny one.
best

I have the similar problem.. and I fix it with this
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}

I have found a workaround that makes the background display correctly on Chrome for Android: define the background in the html tag, not the body. Here is the new css:
html{
background-color: transparent !important;
background-image: url(<%= asset_path "pic.jpg" %>);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And yes, this is valid markup. In my experience, the background still works correctly in every other browser too.