I can't figure out how to display ascii code 𝄞 (music clef) on my web page in safari on iphone. I left out ; at the end on purpose, so you can see what the code is.
It works in Safari on Mac and in all other browsers. All the other codes that I tried worked (for example 9833 -> ♩), expect 119070 and 119074.
Thanks in advance!
See if changing the font will help, the one iOS safari is using may not support the Unicode for the music clef.
HTML unicode arrow works on Safari desktop, but not Safari for iOS
Try using zapf dingbats as done in the answer above and see if that fixes it. If not I think you may have to resort to an embedded image for iOS safari
Related
i am implementing css3 patterns in my mobile site where every browser showing background pattern nicely. but in iPhone(in chrome & in safari) pattern is getting messed up - don't know the reason can anyone help me.
thnks in advance,
This is what I see on my IPhone:
Expected result:
I am coding a web app for an iPhone and I'm wondering how best to use Safari to develop for the iPhone, the main problem being that I've got is that Safari apparently cannot be resized to the narrow 320 pixels of width. How can I do that?
Any other tips and tricks?
If you are looking for an environment to test, Ripple emulator seems a nice option.
I had the same problem and solved it quickly and simply by using a 320x480-sized iframe. Additionally, I added options to change the size (iPhone portrait, landscape, iPad, status bar or not, ...) and presto! an iPhone “simulator”!
Edit: that also allows the use of the Web Developer tools, they're invaluable in Safari or Chrome (I prefer to use the latter, but both are Webkit-powered).
The absolute best way is to use a real device - iPhone or iPod touch - so you get a proper feel for how the device responds. If you're doing hefty animations, for example, testing on a desktop computer may leave you scrambling once you realize the entire page lags horribly on a real device the day before launch.
Barring that, you should use the iOS Simulator that comes with the xCode iOS SDK.
You can use a browser extention or plug-in. For Safari there is ResponsiveResize for instance. You can donwload it here. It allows you to use a predefined browser size, or use any custom size you'd like.
Like in Firefox (Desktop version) I can take using Fireshot
and in Android mobile I can take using Dolphin Screen Cut
I already know that we take screendump using wake+home it doesn't take screencapture of whole webpage including the area under the scroll and it would be difficult to take multiple screenshots by pressing wake+home and scrolling in between but with this there will be small overlap between shots and thee combine screenshot will not be precise
Barry — Webpage screenshot does the trick. You can capture full length webpage screenshots and save them to Camera Roll or Copy to clipboard for pasting into any app that supports pasting in images.
After-all I found the solution
This app worked for me perfectly
Website Screenshot (iPhone app)
You wouldn't be able to do this in Mobile Safari.
If you're developing an application (and since this is stackoverflow I'll assume that's what you're talking about) and using a UIWebView you could do this - you would need to:
Calculate the total height of the webpage you want to capture
Use a UIWebView with the height obtained above to display your webpage at actual size
Render that UIWebView as an image in an off-screen buffer.
Webpage Capture for iPhone | iPad : https://itunes.apple.com/us/app/webpage-capture/id348797820?mt=8
I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.
Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to NO, but on iPad it's set to YES.
Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>
...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.
Old answer (applicable till 2016)
Here's an Apple developer link that explicitly says that -
on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"
Safari Device-Specific Considerations
Your options:
The webkit-playsinline attribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in Safari
For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the UIWebView allows to play the video inline, but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true
In iOS 10 beta 4.The right code in HTML5 is
<video src="file.mp4" webkit-playsinline="true" playsinline="true">
webkit-playsinline is for iOS < 10, and playsinline is for iOS >= 10
See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
According to this page
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.
I tried to embed font at web pages. I can see the font rendering properly at latest non-IE browsers, but when I tried with Iphone Safari Browser, it doesn't render. I want to know whether Iphone Safari supports font embedding. Thanks.
They work in SVG format. Use the fontsquirrel.com generator to make the SVG version.
I'd noticed the same thing, but in truth you can get it to work but with SVG fonts. See this article: http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ for a method for converting web fonts into enough formats to be truly cross-platform.