http://icese7en.github.io/icese7en.github.io/statics/background-display-error/
On 5c, if choose background-cover to display image of gray color profile, if the width less than height, it should render error. On other like iPhone 6s looks well.
You can see the error above, they are the same image with different color profile, the first is gray, the second is rgb.
Version: iOS 9.3.2(13F69)
If you must set any device's width that is fitted on safari and other browser, You must set <meta name="viewport"> in <head> to </head> tag.
It is like this.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.5,maximum-scale=3,user-scale=yes">
<meta http-equiv="imagetoolbar" content="no">
<title>for example</title>
<style type="text/css">
body { background-color: #0000000; }
div.header { position: relative; background-color: #c0c0c0; text-align: center; border: 5px #000000 solid; }
div.content { float: left; background-color: #99ffff; border: 5px #ffff00 dotted; }
div.footer { position: relative; background-color; #990099; border: 5px #ffff00 solid; }
dIv#box1 { clear: both; }
h1 { color: #000000; font-size: 20px; text-shadow: 1px 1px 1px #ffff00; background-color: #ff00ff; }
p1 { color: #000080; font-size: 15px; font-family: "Arial"; }
</style>
</head>
<body>
<div class="header"><h1>It is a example</h1></div>
<div class="content"><p1>for example</p1></div>
<div class="content"><p1>for example</p1></div>
<div id="box1"><h1>for example</h1></div>
<div class="footer"><p1>Copyright (p)2016Grandcross.info site, All right reseved.</p1></div>
</body>
</html>
You must set viewport of device-width is ajust size for web page on your page's width and initial-scale is started for your first width is set, and minimum, maxmum-scale is for pinch in and pinch out, and user-scalable is set to be able to or not for change scale on web.
Let try it!
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=0.5,maximum-scale=3,user-scalable=yes">
The my first written message is fail ,
This is sure.
