I am working on a responsive design that includes iFrames to load Wordpress blogs. The page loads flawlessly on all browsers but native iOS Safari, but they do not load at all in Safari. Co-workers with iPhones suggest they load but don't scroll, which I understand is a simple meta change, but my testbed device (an iPod touch) won't load them even after a firmware update to iOS6 (and I therefore have to design as though iFrames do not load at all). Among the best alternative suggestions I read was to load content into a div.
The content loads into a div nicely. The challenge now is that the divs won't resize, and resizing dynamically is a requirement of the page (the page has a jQuery slideUp header, and content adjusts as it slides). So the iFrame resizes but does not load in iOS, and the div loads but won't resize in any browser. Here is the thoroughly hacked code:
HTML
<div id="iFrame1"></div>
CSS
#iFrame1 {
position:absolute; /* because I am trying everything */
display:block; /* Yes, divs are block inherently, this is hacked code */
float: left; /* there are two iframe divs */
overflow-y: auto;
height: 1px;
width: 45%;
}
JavaScript
function resizeIFrames(){
document.getElementById('iFrame1').style.height = document.getElementById("content").clientHeight - 150 + "px";
document.getElementById('iFrame1').style.minHeight = document.getElementById("content").clientHeight - 150 + "px";}
I am open to all recommendations that are cross-browser compliant. I will use iFrames, divs, tables, whatever. Guide me and I will listen.
Related
Everything works fine on any desktop browsers. Regarding mobile browsers, I’m having a really weird issue with Chrome on iOS only.
First load of the website from the URL bar works well, viewport height is correct. However, if I open the same site from the history or bookmarks, the viewport height is wrong and doesn’t take into account the real viewport.
Here is the basic style css I use:
body, html {
height: 100%;
}
Below part of the code I used before:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
min-width: 320px;
background: #fff;
}
Here is the capture of the first load, there is not scroll bar and height viewport is correct:
Here is the capture on the second load of the page from the history, height is different and the page is scrollable:
Here are the logs, we can see that the height is different from the first load to the second load:
I’m not sure if I’m missing something but I disabled as much as possible my code, cleared the cache of the browser etc. but the issue persist. It happens on various iPhone models too.
Edit 12/20/2020
Here is a similar issue on a react website: https://www.kirupa.com/react/examples/react_router/index.html#/
If open via the link, viewport is correct. Reopening this website from the history, it will have a different height and a scroll bar will appear.
Thanks!
Try using
margin:0;
padding:0;
box-sizing:border-box;
}
And remove the display for html.
I have a web page formatted with jQuery mobile that utilizes Owl Carousel & Photoswipe and it is giving me trouble when viewed on mobile sizes. The problem is that when viewed on a portrait sized mobile phone (IPhone 5) the one image that is displayed is off center. I noticed that there is Javascript applying inline style to the ul with the class of .owl-carousel.owl-theme which sets the display to block. If I switch this to inline while debugging the page in Mobile view with developer tools in Chrome the one image is correctly centered. If I try to hard code this into the CSS then all images are stacked on top of one another and you can only click on one image (which is incorrect behavior since there are three images in the carousel/gallery).
Does anyone know what my problem is, and how to solve it so that if viewed from a mobile device in portrait (when only one carousel image is displayed) the image is centered correctly on the page? I have other pages with similar CSS for the carousel (though not jQuery Mobile) and when viewed on a mobile device the behavior is correct, so I am stumped! Thank you for any help given!
Try this CSS
CSS
ul.owl-carousel{
padding:0;
text-align:center;
}
hope this helps..
This is how I did it. Based on Chandra Shekhar's answer, but it seems the plugin is using divs instead of ul now; also I added a mobile query.
#media only screen and (max-width: 450px) {
div.owl-carousel {
padding:0;
text-align:center;
}
}
I am design a responsive layout webpage
I use jquery to update divs according to the change in window width
But when you snap IE modern ui to one side of the screen, it zooms out on the page making everything smaller, and this is totally screwing up the display of the page.
How can I stop IE from changing the zoom level on snap?
sorry, wrote too soon.
the answer for me is this...
#media screen {
#-ms-viewport { width: device-width; }
}
I implemented a "mini epub reader" in my app. In order to determine how many pages are in a chapter (based on pagination for the underlying UIWebView frame width), I get the scrollWidth via
document.documentElement.scrollWidth
and using the CSS style
-webkit-column-width: (UIWebView's frame width).
and divide it by the UIWebView's frame width. So basically my "get next/previous page" uses the following Javascript
window.scrollTo()
Works fine except when the text fills up basically one viewable page exactly. In that case, it seems the document.documentElement.scrollWidth is one page (UIWebView width) larger than necessary, and what I see are blank pages at the end of a chapter.
Any ideas how to avoid this, or somehow detect "blank" content in the viewable area?
BTW, this is when I'm handling ePub files with Japanese tategaki, so in reality I'm using
document.documentElement.scrollHeight
but the idea should be the same.
Turns out, it was the margins causing the blanks. This CSS did the trick
margin-left: 0%; margin-right: 0%; margin-top: 0%; margin-bottom: 0%;
So i have a bit of a predicamenyt. I have a link that displays in an iframe if viewed on computer, and in parent page if on mobile device.
If viewed on the mobile device i only want users to see the page in landscape. So, i have use the following code:
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>
However, the problem comes in because of the iframe. If viewed on a computer the warning-message div is shown, not the wrapper content, despite the fact that the computer screen is landscape. I think this is because the iframe is portrait.
Does anyone know of a way to make it so that in non-mobile devices, only the wrapper div content is displayed, not the warning message (ie effectively treat all non-mobile devices as landscape)?
I hope the question makes sense.
Thanks in advance for any help.
No, this is not possible with just CSS. Your assumption is correct that the iframe itself, if taller than wide, will also trigger the portrait orientation rules, since an iframe is essentially a sandboxed browser. You'll get the same result if you open it in a desktop browser that has 'portrait' sizing.
A workaround could be, since you're already detecting desktop/mobile browsers, to add a special GET-parameter to the URL when opening in an iframe, ie. add ?iframe=1 to the URL, and then in the code (or if need be even in JS) detect this parameter to add an extra class to your html or body elements. You can then use this extra class to extend the media query rules.
Having said that I'd heavily recommend against what you're doing right now - media queries are all about making web sites and applications more dynamic, not restrictive. Prohibiting your users from holding their device the way they want to is just going to cause complaints and irritation, unneeded if you just use the same media queries to implement an alternative layout or scale down the landscape content to fit into portrait if aspect ratio is really that important.