This is a long shot but I'm hoping there's a way to stop IPhones from resizing a page on load. Problem is if it's a site with a lot of need for refreshing (Say a forum) it gets a little old for users to have to resize that page every refresh.
Is there a way to force Safari/The IPhnone to not minimize the site on refresh that doesn't involve a user changing a setting?
There is a meta tag you can use that will constrain the viewport for the iPhone:
<meta name="viewport" content="width=320" />
From Apple's developer documentation:
Use the viewport meta tag to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, then set the width to the width of the device.
There is a constant you can use for the iPhone's device width: width=device-width.
Not sure if this link will work, but you can read more about Mobile Safari and the viewport tag on the Apple Developer website
Related
I'm currently developing a "mobile version" of a website that is primarily targeting more current iPhones (4+), it's my first time doing this. I'm testing on an iPhone 4S, my understanding is that the screen resolution of that device is 640x920 (when held in "portrait" orientation). I have everything on the site within a 600px wide container, although when I view it on the phone it seems to display by default in a "zoomed out" state, being that I can still see something like 1000-1200 pixels of content on the screen.
I assume that the iPhone displays sites in this way as many are not built to adapt to it's smaller resolution? Is there something I'm missing here? Is there something I set to tell the device to display the site at it's actual resolution?
You need to add a viewport meta tag in your html head.
<meta name="viewport" content="width=device-width">
That tells the browser that the viewport (virtual width) should be set to the device width (physical width).
I want to load responsive html in uiwebview (xcode) , but the page is not adjusting itself as it is responsive html. When i tried same file in other iphone browsers it is displaying adjusted contents i.e. adjusted contents . I dont want to use phonegap for this. How can I display responsive html in this case.
A couple of things you might check are the following:
try to define (or undefine) the viewport in your responsive HTML, e.g.:
<meta name="viewport" content="width=320,user-scalable=yes,initial-scale=1.0">
check if things improve by setting scalesPageToFit:
If you set this to YES, the webpage is scaled to fit and the user can zoom in and zoom out. If NO, user zooming is disabled. The default value is NO.
But these are just shots in the dark, since you provide no information about the way you are doing things and what exactly does not work. In any case, I hope it helps.
This has been asked on here before, but it was never resolved, so I decided so see if anyone has figured out how to do this in the past year:
By default, iPhones and Androids will automatically zoom the page to attempt to make it fit nicely in the frame if no viewport meta tag exists. Web sites designed for desktops will be zoomed out so they fit inside the small viewport, but obviously the pixels aren't really represented truthfully.
So, how do I display a full size web page on a mobile browser so that "300px" is actually represented with 300 real pixels on the mobile device's screen?
I know about the meta viewport method, but from what I've been able to tell so far, the pixel ratio used in such cases is 1.5 or 1.0 when the zoom is set to 100% and the width is set to the device_width, and you can detect at what pixel ratio the mobile device is rendering. I don't seem to be able to find some way to explicitly force devices to use only the 1.0 pixel ratio and never the 1.5 pixel ratio.
How do I for a device to use a pixel ratio of 1.0 so that 300 "pixels" as defined in the CSS actually render across 300 pixels on the mobile device's screen? How do I display a web page at its actual truthful size, not with a pixel ratio of 1.5?
Here's an example of what I DON'T want: Currently, if you use the meta tag to set the viewport properties of a mobile browser like this:
<meta name="viewport" content="width=device_display, initial-scale=1.0" />
then that means that the mobile browser will render the page almost exactly like as the page was designed, except that each "pixel" defined in the CSS actually encompasses 1.5 pixels on the device's screen, thus a pixel ratio of 1.5. This 1.5-pixel-ratio convention was set so that designs don't appear to be too small on high-res devices.
I understand that, but I don't want that in my case.
I want a forced pixel ratio of 1.0 ALWAYS and I will handle high-res devices in my own way. How do I force a 1.0 pixel ratio in mobile browsers?
**If there is a way to simply double the pixel ratio that would work as well
I was able to fix this problem for my site using the following code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I have this GWT app which I need to "fit" within the resolution of a mobile device.
It should not do side scrolling (the width should be the width of the phone screen) but vertical scrolling is required as the app will show list or result items.
The main widget is a GWT VerticalPanel that house some composite widgets.
Any ideas?
You have to set the viewport and/or scale properties for Mobile Browsers of Android/iPhone.
<!--
constraint viewport to device width,
set initial zoom level to 100%,
disable user zoom
-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
Read more about all viewport options here: Targeting Screens from Web Apps
And instead of using ResizeHandler, you could also use LayoutPanels which should be added to RootLayoutPanel instead of RootPanel. LayoutPanel resize automatically when the Window is resized.
Resolution independent layout design is really a pain in the ass especially with GWT like web-apps.
Static web-pages usually rely on fixed layouts (960 grids) etc. However they are not really appropriate for GWT like web-apps.
You could try to use liquid/fluid layouts with min-width/max-widths and percentage values.
See below for more information:
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
http://www.maxdesign.com.au/articles/liquid/
However sometimes especially with mobile devices it makes sense to have a different user interfaces for desktop and mobile.
For example with a tablet it might make sense to have a navigation panel on the left side and a content panel on the right side. However on mobile phones it might make sense to just have a navigation panel and on clicking an item switching to the content panel.
There is a google io talk about the whole mobile/desktop aspect:
Google IO Talk
Code Sample
How do I go about making an image or section of the page full screen on the iPhone?
I have an image that is 480 x 320 and I want to pull that up full screen on the iPhone but it has to be within a webpage so that I can make the image a link back to the previous page.
Currently if I drop the image on a blank page and I open it up on the iPhone it just shows up in the top left corner.
Hopefully I'm not in breach of the NDA here, but here goes.
Mobile Safari, by default, renders a page as if that page had been viewed by a desktop browser, with a default width of 980 pixels.
To change this behavior you need to explicitly declare the viewport, which you do via meta tags. If you declare the width to the constant device-width, it'll default to 320 instead of 980, and everything looks great.
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
I'd say set the viewport meta tag in your blank page so Safari knows to render the page at the right size. For more information, see this link:
Apple iPhone Safari Documentation
nice links which may help you further:
How to optimize your website for mobile devices:
http://solutions.treypiepmeier.com/2008/12/01/optimizing-a-website-for-iphone/