I'm can't get youtube videos to display with the correct height on iOS 7.1, ipad mini, even in the most simple test case. Here's an iframe embed taken directly from the youtube site:
<iframe width="300" height="169" src="//www.youtube.com/embed/8vZqjg-9gTg" frameborder="0" allowfullscreen></iframe>
When displayed on my ipad min (ios7.1), the height is not calculated correctly. It appears as though the control bar might have something to do with it... the height seems to be off by the height of the control bar (or close to it).
Here's a test page: http://codepen.io/anon/pen/tnIsC/
Related
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
I'm confused as to why the navbar does not collapse at its default breaking point of 768px.
In bootstrap's own example the navbar does not collapse at 768px.
I'm having a problem with this on my own website, and went and tested on bootstraps examples.
I tested bootstraps example page here in this screen emulator. I also tested on a real ipad. Both do not collapse at 768px.
IPad - Screenfly
Bootstrap navbar collapse at viewport width 767px, this means your window width is 781px. If your viewport width reaches 768px or any higher value, your navbar will be displayed normally like you see it on any desktop.
Width viewport 767px
Width viewport 768px or higher
You probably was confused by the window width, anyways, if you want to display the viewport and window size like i did in those screenshots, you need web developer addon for firefox, you can also see it in the screenshot, all you need to do is to press on that Resize button and pick Display Window Size but it also has other cool options like View Responsive Layouts or Resize Window.
Hope this helps.
Add this webpage to your iOS7 home screen
Open it, and focus the input field (the keyboard pops up)
The text turns red, as the phone thinks it is in landscape mode
Is there any way around it? Or should we just blame Apple?
Note: This problem only occurs in app-mode, not in regular Safari browsing mode. And it worked fine in iOS6.
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
body {
color: blue;
}
#media (orientation:landscape) {
body {
color: red;
}
}
</style>
<body>
<h3>this text will go red when in landscape</h3>
<input type="text" />
</body>
This is clearly an iOS7 bug. In my application I found that I can reliably distinguish portrait mode from landscape mode even when focused on an input field with the on screen keyboard open using this media query:
#media only screen and (device-width: 768px) and (device-height: 1024px) and
(min-aspect-ratio: 4/3) {
/* landscape differences here */
}
I couldn't use orientation: landscape because the rule would get activated even in portrait mode if the keyboard is open.
I probably need a different rule for the iPhone but I haven't gotten that far yet.
The keyboard orientation bug effects some web browsers as well, not just app mode, but hopefully this can be used in either instance. It also seems to effect some Android devices.
Here's how I got around it for mobile web browsers:
#media only screen and (min-device-aspect-ratio:1/1) and
(max-device-aspect-ratio:3/2) {
/* Landscape-to-portrait corrections here */
}
The idea is that this query can only fire if a screen is either a perfect square or close to square, a scenario that pretty much only occurs when a keyboard is raised on touchscreen devices. The aspect ratio values I've used translate to between 1 and 1.5, so as an example a 16:9 screen has an aspect ratio of 1.7777778 (16/9) and would not be targeted. Once the MQ fires, you can re-style the effected elements. This doesn't fix the bug, it just conceals it.
If an OS doesn't contain the bug, this query will never fire, so if Apple fixes this, you don't need to change your code if you don't want to.
If a device is genuinely flipped to landscape mode, the aspect ratio only increases, and even moreso if the keyboard is raised, so the bug should never appear when a device is on its side.
To my knowledge, there are no devices with square/almost-square screens out there that would pick up this media query (at the time of writing), but please correct me if I'm wrong.
This has been tested on an iPhone 5s in Safari, Dolphin and Mercury browsers running iOS7, and in Chrome on an Android One X running Android 4.2.1 (which also experiences the same bug orientation bug with keyboards).
I also checked to see if it would fire on a Blackberry Bold 9780 (480x360), and it didn't. I don't quite trust this, as the resolution should have made it fall within the target range and it loaded the other MQs just fine, so perhaps it assesses the aspect ratio based around the physical size of the screen instead of the number of pixels. This is potentially an instance where the media query applies your bug solution to a screen that isn't experiencing the bug.
It's not perfect, but it got me out of trouble after a lot of headaches.
innerHeight is now affected by the keyboard being up in iOS7. If you check the innerHeight vs innerWidth with the keyboard up when the device is in portrait you will find that the innerHeight < innerWidth so maybe the browser's orientation check is as simple as that instead of using the device orientation straight up.
I have a UIWebview in which a twitter page loads. Because twitter is being opened from a mobile device it opens the mobile twitter which has a specific width depending on device, and device orientation. Now my query: my UIWebview's width is shorter than mobile twitters width so the user has to scroll sideways to read content. I do not want that and want to change the zoom or preferably the width of the twitter page so it can fit in my uiwebview.The height is fine, scrolling up or down is normal. I have tried using "setScalesPageTofit" in my "webViewDidFinishLoad" and that displays the whole twitter page going out of the webview bounds. I have also tried using "sizeTofit" but no success. If any more details required please left me know
Thank you very much..
Checkout this SO Post: Getting iPhone's mobile twitter webapp inside UIWebView. The person who posted the question answered his own question.
The trick seems to be setting the correct "device-width".
I am using media selectors in my css:
#media all and (orientation:landscape) { /* etc */
I test layout in Safari, and then the iPad simulator.
But Safari seems fixed in landscape. How to tell Safari my media should be portrait?
That is so that I can test the layout when the orientation is landscape.
I found a media property of a styleSheets object, see
http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList
but, at least in Safari or the iPad simulator, that list is empty. So adding a new media string to the list probably isn't the answer.
I tried setting width and height in the viewport meta tag to a hasty portrait shape:
Nope. media is still landscape orientation.
Argh, i do not want to make special testing versions of the css.