I am not sure why the Google Map on this page http://devhost.in/ftmap/ft.html does not show up in portrait view on iPhone (iOS 7). It shows in iOS 6 and other mobile devices.
I have checked the media queries and everything seems fine and the fact that it works on all other devices.
Check line 8624 of all.css, that one is doing the harm:
.visual{display:none!important;}
Related
I am trying to enable users print a document in landscape from an iPhone web browser.
I have tried using #media print{#page {size: landscape}} which works fine on desktop Chrome but is having no effect in mobile Safari.
Other than using CSS to rotate pages 90 degrees, is there a way to tell mobile Safari to print in landscape?
When I run it in desktop its okay , but when I do inspect element and change to mobile view it doesn't work the autoplay.
iframe src="https://www.youtube.com/embed/vsSQEUSQkIs?autoplay=1" allow='autoplay'>
That is the iframe Im using putting ?autoplay=1 makes it work autoplay to desktop, but not working on mobile.
What about your experience with actual Phones?
In my experience autoplay doesn't work with iOS Safari, however Chrome on an Android phone does seem to work.
I think Safari has some inbuilt prevention for videos autoplaying.
Mobile browsers have been making it harder for videos to autoplay on mobile, to prevent involuntary data use. It's most of two years since the question was asked but it was true even then.
The YouTube Iframe API documentation says:
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
I have created a webapp that is exhibiting different behavior between an installed PWA and in normal mobile safari on iOS after an orientation change. When I flip my iPhone or iPad from portrait to landscape and back to portrait again, sometimes the portrait orientation will be zoomed in (and sometimes not). This only occurs in the installed progressive web app (PWA) and not when viewed in the normal mobile safari. Additionally, this behavior occurs only for an iOS PWA (both iPhone and iPad) and not for an Android PWA.
Do you have any ideas as to why this is occurring and/or possible remedies? I have already tried disabling zoom on orientation change, reordering my css for the different orientations, setting the focus to a large constant div prior to and after orientation change, and increasing default font/input sizes.
I haven't done much debugging on ios safari and I am having a strange issue. I need to play HTML5 video from vimeo. The embed code works as expected. If flash player is not detected then HTML5 video is presented to the user.
On desktop all browsers I turn of flash and works fine. On ios using ipad simulator portrait mode in safari the video plays but once I turn it to landscape and load the page and try to click the video to play nothing happens.
If you go to http://tennlife.com:82/drupal/projects/millcitymuseum and navigate to the 3rd slide on the page you can see what I mean.
What is the best way to debug this type of thing in the simulator if any.
Has anyone run into this type of issue and do you have any suggestions on a solution?
You can turn on the Debugging console in iPad and iPhone - http://maisonbisson.com/blog/post/14447/step-by-step-turn-on-the-iphone-ipads-web-debugging-console/
Also you can use Firebug Lite to inspect the DOM http://getfirebug.com/firebuglite
How to test website compatibility for iPAD without having iPAD , in both condition Portrait and landscape?
on Windows PC
also, there is another web-site: http://ipadpeek.com/
but, if you have a special css file for ipad, this site cannot show it. you should change your main css file with ipad specific one...
also, you can rotate your ipad in ipadpeek.com
edit: there is an app for looking your layout on ios device here.
You'll probably have to use a windows browser to fake the browser-agent header. This page gives more information as well as the browser agent string.
You could use Chris Pederick's User Agent Switcher in Firefox, but you won't get webkit rendering. The best option is probably to use the developer tools in Safari and change the browser agent in the Develop menu.
You should also make sure your screen size matches the iPad (1024x768 if I'm not mistaken). To test landscape, just change the screen size.
What you won't get is multitouch and gesture testing...
What are you actually trying to test? If it's just a website, that should be sufficient.