observatus

Q: Images are flattened on iPhone and iPad.

I have a web page that shows images that a user may tap to control lights (via programmable board). The page displays the images fine on Chrome, Edge, IE, and Firefox, but not on Safari.

 

Thanks in advance for any help.....

 

iPhone on the left, Chrome and other browsers on the right.

IMG_9701.PNGCapture.PNG

 

Here is the code from the page.

String form = "<body bgcolor=BLACK><form action='led'><font size=6><font face=verdana><font color=yellow>ARDUINO LIGHT CONTROL<br>"

"<button name=state value=6  id=close-image> <img src=http://myurl/folder/blueStrip1.png style=width:140px;height:140px; ></button>"

"<button name=state value=7  id=close-image> <img src=http://myurl/folder/greenStrip1.png style=width:140px;height:140px;></button>"

"<button name=state value=8  id=close-image> <img src=http://myurl/folder/redStrip1.png  style=width:140px;height:140px; ></button><br>"

"<button name=state value=9  id=close-image> <img src=http://myurl/folder/bluegreenStrip1.png style=width:140px;height:140px;></button>"

"<button name=state value=10  id=close-image> <img src=http://myurl/folder/pinkStrip1.png  style=width:140px;height:140px; ></button>"

"<button name=state value=11  id=close-image> <img src=http://myurl/folder/GlassBlk11.png style=width:140px;height:140px;  ></button><br>"

"<button name=state value=12  id=close-image> <img src=http://myurl/folder/xmassTree1.png style=width:140px;height:140px;  ></button>"

"<button name=state value=13  id=close-image> <img src=http://myurl/folder/village1.png style=width:140px;height:140px;></button>"

"<button name=state value=19  id=close-image> <img src=http://myurl/folder/allDec1.png style=width:140px;height:140px;></button><br>"

"<button name=state value=14  id=close-image> <img src=http://myurl/folder/allGreen1.png style=width:140px;height:140px;></button>"

"<button name=state value=15  id=close-image> <img src=http://myurl/folder/allBlue1.png style=width:140px;height:140px;></button>"

"<button name=state value=16  id=close-image> <img src=http://myurl/folder/allRed1.png style=width:140px;height:140px;></button><br>"

"<button name=state value=17  id=close-image> <img src=http://myurl/folder/allPink1.png style=width:140px;height:140px;></button>"

"<button name=state value=18  id=close-image> <img src=http://myurl/folder/allBlueGreen1.png style=width:140px;height:140px;></button>"

"<button name=state value=0 id=close-image> <img src=http://myurl/folder/allOff1.png style=width:140px;height:140px;></button><br>"

iPhone 6s, iOS 10

Posted on Sep 27, 2016 12:39 PM

Close

Q: Images are flattened on iPhone and iPad.

  • All replies
  • Helpful answers