Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
I have a div styled to truncate centered text with an ellipsis, with some padding on each side. It works when using a desktop browser, but on iPad the text seems to ignore the right padding and becomes centered incorrectly.
I'm using this for the styling:
div {
text-overflow: ellipsis;
width: 120px;
padding: 0 38px;
overflow: hidden;
white-space: nowrap;
border: 1px solid black;
text-align: center;
}
An example can be seen here. View on iPad to see the problem. http://jsfiddle.net/35Lyk9yp/
I'm thinking this might be some bug with the mobile browsers? It didn't work on iOS Safari or Chrome, but it's ok on Windows Safari and Chrome and Firefox. Is there a simple workaround for it?
Edit:
I found a workaround by using an inner div with the content that I used to do the ellipsis, and then used the outer div to set the padding. If there is a way around it with one element though, please let me know.
In order to get your code to work you need to have CSS overflow, width and display.
You are probably missing the display.
My site is www.familyhistoryconferencenwa.org
I have a MacBook Air, an iPhone 5 and an iPad Air so I phrase this for iOS 8.1.1 but obviously I want the solution to work for all tablets and smart phones across all platforms.
On the "Class Schedule" page of the site I have an iframe that works correctly on my MacBookAir running OS X Yosemite (10.1.1) but on my iPad Air and iPhone 5 running iOS 8.1.1 the frame width displays improperly. It extends to the right beyond the right edge of the page. If you visit the site on a a desktop or laptop then on a mobile device you should see what I mean.
My question is: what code do I use to get the iframe to display properly on mobile devices?
The relevant code is:
<div style="text-align: center">
<iframe src="url"; frame-border="1"; height="600px"; width="100%">
</iframe>
</div>
As I said, this code works correctly on the MacBook Air. The iframe occupies the width of the page. But on the iPhone and iPad the frame extends beyond the right border of the page. What am I doing wrong? (By the way, if I set the height to 100% I inexplicably get a frame about 200 px high although the source document takes 600px to view all of it.)
I've consulted two texts on HTML coding, searched other forum sites on the web and searched this site for the answer to similar questions but have had no luck. I've seen the item "Iframe on mobile devices problematic" on this site but I'm really hoping that I'm not stuck with that for an answer.
Any help will be greatly appreciated.
Thanks
Steve
The best responsive iframe code I've come up with thus far is:
// HTML:
<div class="iframe-container iframe-container-for-wxh-500x350"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://urlToTargetSite.com">
<p style="font-size: 110%;"><em><strong>IFRAME:</strong> There is
iframe content here but your browser version does not support
iframes.</em> Please update your browser to its current version
and try again.</p>
</iframe>
</div>
// CSS:
.iframe-container {
position: relative;
margin: 5px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
}
.iframe-container-for-wxh-500x350 {
padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */
}
The rationale behind the code can be seen at How To Make Responsive Iframes -- It's Easy!
There are three salient points:
Set no attributes in the iframe opening tag, specifically not width and height.
Put a div container around the iframe, and use CSS height: 0; and then padding-bottom: nn%; to give the container a height equal to the height:width ratio expressed as a percentage.
Style the div inline with -webkit-overflow-scrolling: touch; and overflow: auto; which are necessary to handle scrolling and overflow on mobile devices and are unstable in CSS.
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html
I am using jQuery Autocomplete on my jQUeryMobile application. It works perfect. Now I'm trying to show vertical scrollbar to scroll through the list of looked up items. The scrollbar shows up on desktop safari, but not on iPAD safari. my css looks like this:
<style>
.ui-autocomplete
{
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
max-width:70%;
}
</style>
Can someone help, thanks!
Add this to your style:
-webkit-overflow-scrolling: touch;
Put the above style in CSS document of class body.....