According to this link prefetch , prefetching is working only for specific browsers. Unfortunately for me, I need it to work mostly on mobile devices.
Anyone have a solution how to preload, prefetch, cache page so it works for iOS? (Safari)
Use Jquery mobile, here is the documentation
and here is the download link.
One solutions here is to go with base64 images.
Following links might be useful for further investigation.
https://en.wikipedia.org/wiki/Data_URI_scheme
How to display base64 encoded image in html
There are similar options with prefetch like "dns-prefetch", "preconnect" and "subresource" but support on IOS safari is not great(as of today).
https://css-tricks.com/prefetching-preloading-prebrowsing/
Nowadays Safari mobile supports preload https://caniuse.com/?search=preload
Related
I have some issue on image rendering. I had same issue on several times while browsing stacoverflow and some other web sites.
This is the different
Bad Rendering
Good Image Rendering
what is the reason for that?
Does this happen in any browsers or just chrome? Do you use Vodafone?
If it's not just chrome, maybe your carrier compress images - vodafone does this, when you use their mobile connection.
I created a website using HTML 5 and it works perfectly on Chrome, Firefox and Internet Explorer 10. If I'm running the website in Compatibility mode the layout is all messed up.
Only if I change Document Mode from IE5 quirks to another value inside Developers Tool it's working perfectly.
Is there someone who can give me some hints or some tips&tricks to make it work properly.
You can find the website here: http://www.westmotors.ro/beta
Thank you in advance.
Here is a nice website where you can see the HTML5 readiness of any browser:
http://html5readiness.com/
In addition I would strongly recommend you to use the Modernizr javascript plug-in in order to make your site compitable: http://modernizr.com/
Last thing, try to find some "polyfills" for html5 features you cannot use in your site "the native way"
I'm building a simple page to display videos uploaded from my iphone using the html5 video tag.
if you're watching it with chrome you probably see this video is presented horizontal, although it's not- try to download it or watching it from safari (haven't tried another browsers).
I havne't found anything on the net mention this problem, is it a known chrome bug? does this tag any attribute that I can change to display it properly?
Thanks.
Edit:
looks like this also happen in IE
you could use style="-webkit-transform: rotate(90deg);" on the video tag along with a html5 compatible video player solution (otherwise you get rotated controls as well)
It's an encoding issue from iPhones. I downloaded the video and it was still displayed horizontally using mplayer. There is more information here:
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
and as suggested you'll need to re-encode the videos using a library that uses a more supported standard encoding. (Or try to transform the video, on the page but that would be ugly)
I am trying to run a script that supports for HTML5 offline working. It works fine in Firefox but not in safari. I want it to work in safari too. You can see here.
http://vps.sunztech.com/clock.html
HOW TO CHECK OFFLINE WORKING: open the URL when internet is connected.close the browser after loading all contents. now disable internet and load that URL again it should show the the data from cache.
The above is working fine in Firefox but not in Safari.
May anyone can give me the solution...
I will be thankful
Make sure that the manifest file is served as type text/cache-manifest. There are several other guidelines worth checking in Apple's developer documentation for iPhone and Mobile Safari.
Is there anyway to create a desktop icon (cross platform/browser) from a linked image on a page without some kind of executable?
<img src="nice_icon.png" />
Not cross-platform, no, but most browsers support this out of the box. At least Firefox and IE do this no problem on Windows: When you drag-and-drop a link, a .lnk file is created on the desktop. I assume it's the same for Mac. For Linux, I don't know but I could imagine this works with the more modern graphical desktops as well.
There is no way to reliably enforce this across browsers, see this question (answered by yours truly)
Try it out!