So what I don't understand is why do you not see the 700px version in the original site that uses variants on the slider? Users of anything other than iOS do...
So what I don't understand is why do you not see the 700px version in the original site that uses variants on the slider? Users of anything other than iOS do...
I suspect it's down to the resolution of your phone Gary. As new devices are manufactured with ever increasing resolutions it's becoming ever more difficult to dictate how your site is presented on each and every device. This is why I stated that I thought your 4 or 5 variants was overkill.
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
This is only speculating, but maybe your additional media CSS confuses the iOS browser?
If I didn't miss someting all this does is forcing the xr_xr element to top. Shouldn't a simpleCode:<style> @media screen and (min-width: 1200px) {#xr_xr {top:0px;}} @media screen and (min-width: 940px) and (max-width: 1199px) {#xr_xr {top:0px;}} @media screen and (min-width: 700px) and (max-width: 939px) {#xr_xr {top:0px;}} @media screen and (min-width: 480px) and (max-width: 699px) {#xr_xr {top:0px;}} @media screen and (max-width: 479px) {#xr_xr {top:0px;}} </style>
just do the same? Maybe it is worth a try?Code:<style> #xr_xr {top:0px !important;} </style>
To check if the solution of the linked stackoverflow issue works you could simply add the style information to your iframes and check if it fixes the problem. For example change
toCode:<iframe id="hpslide1200" src=hpslider.htm width=1200 height=405 scrolling=no frameborder=0 marginheight=0 marginwidth=0></iframe>
Not that I knew what exactly that should be good for.Code:<iframe id="hpslide1200" src=hpslider.htm width=1200 height=405 scrolling=no frameborder=0 marginheight=0 marginwidth=0 style="width: 10px; min-width: 100%; *width: 100%;"></iframe>
Many thanks, Siran. I've tried both of these suggestions but none of them has made any difference. iOS still consistently fails to display the correct variant in iFrames.
I've had to resort to publishing a separate HTML file for each iFrame variant, so that I can be sure it will load the correct version. That's not ideal though, because it makes publishing a hassle. So, if you have any other ideas, please do let me know.
Without an iOS device I have no chance to experiment a little bit. The only advice at the moment would be to create your iframe content as separate pages of a conventional website. That way you would at least be able to make limited use of repeating objects and live copies.
Bookmarks