I'm building an iPad specific web app. Currently, I'm trying to set the page width & viewport settings to optimise the site.
What I'm trying to achieve is to have the web app take up the full screen in both landscape and portrait modes without user scaling and without blank areas to the left and right of the content.
I can achieve this with:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
and
max-width:1024px;
min-width:768px;
The problem then, is coding all of my css for the variable widths. I'd really prefer to have a single css width so that I can properly code the widths of the page elements.
So if I set the css to have a single width, I can't seem to get the viewport settings right! When I open the page in portrait with these settings:
<meta name="viewport" content="width=device-width,user-scalable=no" />
everything works fine. When I rotate the device to landscape, again it's all good. Coming back to portrait then is where I have the problems. The page is then too big for the viewport! I want it to fit the device width still!
It's seems like it should be really easy! Am I missing something? I actually don't have an iPad (holding out for v2), so im testing on iOS simulator which comes with xcode – there shouldn't be any difference though!
I've been using this.
Not sure if this helps any, but there is a way you can detect the rotation and perform actions. Maybe forcing the page to render again or check the scaling. However I've not come across this problem on the iPad so far, do you have a page we can see to test on a device?
<body onorientationchange = "updateView();">
<script>
function updateView()
{
switch (window.orientation)
{
case 0: // Portrait
break;
case 90: ; // Landscape
break;
case -90: ; // Landscape counterclockwise
break;
}
}
</script>
Related
I'm building a web app and have been trying to sort out some mobile first design, if I scale my chrome window down, the page is responsive and works well, scaling objects down to a suitable level.
However, when I set it to a mobile view-port (by clicking inspect-element and then clicking on the icon of a phone) the page does not scale down accordingly - how do I know what my page will look like on a mobile device? Will it be the same as when I scale down the page in the web browser window or will it be like when I open a mobile view-port?
You probably need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>.
The default behaviour of mobile browsers is to act like a fairly big window, because non-responsive websites would freak out at the actual size of the phone. This tells the browser to use its true size instead.
I'm having a problem on a web page where an orientation change (landscape to portrait, or portrait to landscape) causes the window to display incorrectly:
The display reorients, correctly for a brief instance, and then an incorrectly scaled column appears on the left hand side. The incorrectly scaled portion of the window is part of the pre-rotated page (oriented correctly).
Reloading the page fixes the problem (until the next orientation change).
At the moment, I only have an iPad mini 7.0.3 to test on.
For tablets, there is no orientation change function, and this displays fine on Android tablets.
I can't find anything online about this... is it a known bug?
The viewport meta looks like:
<meta name='viewport' content='width=device-width, width=device-width, height=device-height, user-scalable=yes'>
------------------------ update: ------------------------
I whittled down the page, and the results are:
1. I have included some fonts from http://openfontlibrary.org
2. I have a <ul> on the page
If I remove either of these, the problem goes away! (probably something other than <ul> will cause this as well, since at least one of the pages shows the problem without this tag).
Will research further... it would be a shame if I couldn't embed fonts!
you can try adding this to your body tag:
onresize="location.reload()"
this should reload the page when the vieuwport changes.
I'm putting together responsiveness for a client of mine (the site is using Bootstrap 2) but I'm having an issue. When I visit the site on my mobile device (HTC X8) I notice that it isn't really zoomed in to where it would look good.
Here is the link I'm using, and the result on my phone: http://www.gigee.me/draft/index.php?/account/login (if the site redirects you to just gigee.me, type in the rest of /draft/index.php?/account/login and it should work)
However, I want it to be more zoomed-in. Just like it looks when you are scaling down in a browser.
I think this might be a simple fix. I believe most of my HTML and CSS is correct.
I would really appreciate any and all help with this.
Most mobile devices utilize what is called a "virtual viewport". Essentially, what this means is that even though the device itself is relatively very small compared to a regular laptop / desktop monitor, it still displays at a high resolution. For example, newer versions of the iPhone and iPad both display at a virtual viewport of 980px. So even though you have a Bootstrap 2 responsive website with breakpoints at 768px and 980px, your phone is actually displaying the website at the desktop or tablet version since its virtual viewport is most likely higher than its actual viewport.
What you need is to detect phones (and tablets if you choose) and tell the document to render a viewport zoom if the user is using a mobile device.
In your HTML head tags, add the following
<meta name = "viewport" id = "viewport_device">
Then include the following JavaScript in your document after the jQuery library reference
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/IEMobile/i)){
$("#viewport_device").attr("content", "initial-scale = 0.50");
}
else if(navigator.userAgent.match(/iPad/i)){
$("#viewport_device").attr("content", "initial-scale = 1.00");
}
The IF statement will detect all major mobile browsers. If a phone is detected, the initial-scale is set to 0.50. This is essentially telling the browser to zoom in 50%. If an iPad is detected, then the initial scale is set to 1. Depending on your page, you might want to play with these values to see what values look best for your site.
I'm making a responsive site with three states (full, 480px and 320px).
Scaling to device-width look good on smartphones and devices with screen smaller than 700px, which is where the first responsive mode kicks in.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
However, on the iPad i want the width to be 1200px so the page initially shows zoomed out in it's "full glory".
Is there any way to make this by client side code? I know i could fetch user agent on server side but since i am not making the back end code, i'd prefer a html/js solution.
Of course, a responsive state for iPad's would be ideal, but there's not time or money for that and the desktop site works good enough.
Don't know if it will be the solution for anyone else coming here, but what solved this to me was setting min-width to each responsive states <body>.. made the site load decent enough on the ipad..
I'm in the process of building a support page for my pre application.
I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.
I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.
I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?
Update:
The extremely simple page that I am currently testing with.
On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.
I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).
I found out the proper way to do this on the webOSDev forums.
The following should be in the header:
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>
This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.
Posting a URL of a problem page would be a big help here.
In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.