I'm using an iframe to display external webpages on my WordPress site. It looks great on desktops, but on my iphone the embedded page seems to break the parent page causing in to squish over to one side.
Here's an example:
http://www.torontoactingstudios.com/studios/bongo-productions/
I've tried restricting the size of the iframe for mobile devices, but then the page I'm importing no longer shrinks to fit the iphone screen.
Would love to hear any ideas...
===
Well I ended up basically coming up with a different mobile version of the pages with the frame. Not the perfect solution, but better than nothing.
Actually, i think there is no "clean" way solving this. At first, responsive design & iframes don't play together well. Second, iPhones and iframes don't play together well as well.
Maybe the best idea for you is to serve a different layout for mobile via a mobile redirect plugin. I.E. this one: Simple Mobile URL Redirect Plugin
Related
I have developed some site using Django. It works fine for desktop. But on mobile i need to zoom out to view the page.
Can anyone help me with settings to be added for changing desktop web pages to mobile pages so that they will get fit in mobile screen size?
Thanks!
Use media queries and device width meta tag to make your web page get fit in mobile also.
Here is reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this will help you any comment or query welcome..
how do i go about doing it?
there is one solution that i thought would work..
my theme allows me to turn of responsive design..
i copied the whole theme folder and renamed it to theme-mobile..
so now i have 2 exact same themes but with different names..i go in theme settings and turn of responsive design on one of the themes..
then i tried to use this plugin to switch theme when someone is using mobile device
but the problem is even if i have two themes they share the settings..if i turn off responsiveness on one theme..the other one gets turned off too..
any help would be really appreciated..
Here is a plugin that will get you half way there.
http://wordpress.org/plugins/responsive-opt-out/
It does everything in the front end so you can do it all with css.
There is a javascript fix using JQuery.
here is some pseudo code
LINK.onclick .find "<meta name="viewport" content="width=device-width">" .replace ""
essentially you javascript will listen for the event of a mouse click on your view desktop link it will search the DOM for some html that should be something like which is what make the site responsive on a mobile (you would still need the stylesheets) upon finding that bit of html it would replace it with a blank string so the site is no long mobile responsive. (it would still appear responsive in desktop browsers as you scale them)
i am creating a mobile site, now my problem is the images are getting render when i run the site on PC, and also while running the site on IPhone, but when it comes to Opera Browser for any symbian based mobile, the images are not at all rendering..
i am using asp:Image control on the site.. is this causing it not to be displayed on mobile.
if yes, then whats the equivalent for the mobile control. and also i want to resize the image as per the aspect ratio almost all the images are big in dimension.
Please anyone have any idea for the same, i will appreciate it.
If you wish to have your pages and images resize automatically based on the size of the device on which they are being viewed, you might find an answer with Zurb Foundation. I use it in almost all of my web "responsive web design" projects now.
http://foundation.zurb.com/
Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.
While Handheld option is available in CSS then why some people use different subdomain and make different site for mobile?
I second what Justin Niessner said. Also, the mobile version of a site is usually structured differently from the "main page". Other content may be displayed on the front page, an only a selection of menu items, or a whole different menu altogether. Videos have to be embedded differently, images as well, Javascript effects altered and so on. Using different style sheets mostly just won't cut it.
My guess is to make the distinction more apparent to the user.
That, and the Blackberry Browser (and possibly the iPhone) identifies itself as a mobile device (depending on settings)...but could theoretically be able to display the full page. Using CSS, you're also depending a lot on the mobile browser to do the correct thing with your page.
You'll provide a much more reliable interface if you let the user specify the experience, not the site.