cvmgtw
Last Updated: September 11, 2018
·
25.09K
· mehmetbat
215379 10150169088569415 4572741 n

New HTML Tricks for Web Developers in Apple’s iOS

Picture

Apple’s recent iOS 6 update added some nice new web standards support to Mobile Safari, the default iOS web browser for the iPhone, iPad and iPod touch.
Apple’s documentation remains sparse and occasionally outdated, but luckily Max Firtman, author of O’Reilly’s Programming the Mobile Web, has a very thorough rundown of everything that’s new in iOS for web developers.

By far the biggest news is support for file uploads and camera access using a combination of the File API and the HTML Media Capture API. To let users take a picture from your web app, you’d use a file input tag something like this:

<input type="file" accept="image/*" capture="camera">

Mobile Safari’s Media Capture support is incomplete so it will ignore the capture attribute, as well as any value for accept other than image or video, but at least web apps can now capture and upload images from the iPhone’s camera.

Demos:

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

Good work.

Say Thanks
Respond

10 Responses
Add your response

40
Img 1751

Nice & helpfull. Thanx for the share

over 1 year ago ·
44

Eline sağlık Mbat

over 1 year ago ·
54
6ff13f4a9e67ba78951c01ae11bb34d8

que bueno, Gracias por eso.

over 1 year ago ·
91

Thanks for your prototip

over 1 year ago ·
403
4797dceabf28e618ad4692d4afc6b67c

Good pro tip!

over 1 year ago ·
2031
0a4f1af54378eed0ab21284121674474

Thanks for sharing.

over 1 year ago ·
2898

very nice article...thanks a lot for sharing...

over 1 year ago ·
29921

Mobile Safari’s Media Capture support is incomplete so it will ignore the capture attribute, as well as any value for accept other than image or video, but at least web apps can now capture and upload images from the iPhone’s camera.

I put together a quick demo page of Mobile Safari’s Media Capture support so you can see the new interface in action. The first two examples on that page work, the third audio example does not. You can see in the demo that Mobile Safari helpfully shows a thumbnail of the image prior to upload. It’s also worth noting that Mobile Safari supports the multiple boolean flag for uploading more than one image at a time, though in that case you lose the ability to access the camera.

For more on what to do with those images once the user has selected them, check out the Mozilla developer network, which has an excellent tutorial on using the File API.

Other highlights for web developers in the new Mobile Safari include support for the Web Audio API (great news for anyone building mobile, web-based games), increased application cache sizes (now 25MB), a faster JavaScript engine and some new CSS tricks as well — CSS Filters, CSS Cross Fades and the not-yet-a-standard CSS Image Set we told you about earlier. Be sure to read through Firtman’s whole post for all the details.

While there’s plenty to like about the new Mobile Safari there are some things missing, like support for WebRTC and getUserMedia, WebGL and sadly our least favorite bug — the Viewport Scaling Bug, which causes Mobile Safari to incorrectly reflow content when rotating from portrait to landscape — seems to still be hanging around. As always there’s a JavaScript workaround available

Also see :
https://www.techavy.com/kickass-proxy-kat-unblocked/
https://pirateproxy.xyz/
https://freemoviesite.me/
https://frpbypassapk.net/

4 months ago ·
30099

Thanks for this great post. This is really helpful for me. Also, see
https://epsxeapk.weebly.com/

3 months ago ·
30667

Good material. I'm trying to figure it out, but it's hard to cope yet. Tell me a person who could develop an application on iOS for buying tickets? Here is this resource. https://best-vegas.com/events-next-14-days/ And also interested in further services. Thank you.

8 days ago ·