I am making an app which has a UIWebView, in which I need to display the mobile version of an SE question, However, the page seems to have a minimum width - 768 to be precise - which just happens to be the width of the tablet itself.
This is the code I am using:
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:#"http://stackoverflow.com/questions/7312584/inject-a-local-javascript-into-uiwebview"]]];
}
Nothing fancy. My web view, however, has a width just a little smaller, which means that there is just a little bit of ugly side-scrolling involved.
How do I make the mobile site ignore that I'm on an iPad (it works fine on an iPhone), and just scale to whatever size I make the UIWebView?
It knows what you are by the User Agent, which you can see how to do in this question
Change User Agent in UIWebView (iPhone SDK)
Alternatively, you could inject JavaScript into the page after it loads and change the width of the body or main div
Injecting JavaScript into UIWebView
To set the body width, see this question
set body width in px?
Related
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
I am trying to change an website from fixed layout to a responsive layout but I am having problems setting up the html width. As you can see in the image below the width of html tag is 980px even if the page is empty, no css or js, just the html tags and doctype (the head and body are added automatically by browser):
For testing I am using the Google Chrome Dev Emulator set up as Apple Iphone, I also tested on a phone and still the page looks too big for the screen.
Do you have any idea what to change to make my html tag width vanish?
It's your Dev Emulator. According to the Safari Web Content Guide by Apple (under "Examples of Viewports on iOS"), the default size of the viewport of the iPhone is 980px. The Dev Emulator is then...emulating that page size for you. If you want to make it go away, just turn off the emulator or adjust any settings it may have.
On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.
I've got a little problem with one of the sites I've developed. The problem is quiet simple, however the solution seems to be a bit harder.
The problem
The problem is that the page is being rendered as it should be on a mobile device at first, but right after the pageload is finished, the page resizes to fit the viewport. Nothing strange, this happens at almost every non-responsive website. But the strange thing is that only 75% of the available width is being used.
I already compared the based/sliced version of the design with the production version. The based version does render as it should (100% width). I've tried to spot the differences in the CSS, but I can only find a couple, I tried resetting those, but that didn't work.
Also, I've tried to disable the javascript (it's only Lightbox and 1 JqueryUI "AddClass" effect). The javascript effect has only 1 task: after pageload the header will be resized from 480px to 220px height. There are no changes being made to the width of any element on the page.
Last but not least I started Adobe Edge Inspect and took a look on the pagesource of the mobile device. But unfortunately I can't spot any element on the page that exceeds the width of the "body" tag. The only one exceeding the width is the header image, but the image is within a div (100% width) with overflow:hidden
Based and production version
If anyone would be so kind to take a look at what messes up the rendering, that would be awesome. I can't seem to find out what is causing the issue.
Based (working): http://www.nambi.nl/lefunq/
Production (rendering at 75% width on mobile): http://www.lefunq.com/_index.php
Thanks to everyone who takes the time to look into this issue.
Your problem was caused by the facepile code:
<div
class="fb-facepile"
data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
data-size="large"
data-max-rows="1"
data-width="450"
></div>
More info:
As soon as the facepile cannot be loaded due to the invalid login, the page becomes resized. As soon as I log in to facebook and the facepile is shown, the page is stretched the way it should. I just have to find out what is causing the weird scaling, because if there's no facepile, it's a 0x0 div/iframe, etc.
Solutions:
I have tried a couple of things. Onload or Onready events, and hiding or removing the facepile code. In the end, neither of these options worked. The scaling happened before the facepile was loaded completely. The final solution is a javascript workaround, checking if there's a mobile device, if so, then disable the facepile code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
}
I found the way to detect if the browser is mobile in this answer:
What is the best way to detect a mobile device in jQuery?
I tried native browser, Firefox and Dolphin on Android 2.3.7.
Both pages render at 100% zoom, and the zoom does not change after the page is loaded completely.
I believe this problem is specific to the software of your device.
on the following webpage, all images are set to have a maximum width of 100%. This works fine on all devices except for blackberrys. Has anyone come accross this issue?
http://www.applewoodindependent.co.uk/
In Blackberry as we don't have the webview like in iOS or android.....we have the browserfield2 api.
In the browserfield2 you can scale the web page using the initiale scale method in the browser field config.
config.setProperty(BrowserFieldConfig.INITIAL_SCALE, new Float(value));
Adjust the scaling by passing the correct value in the method.