Quick question, as I think this should be very simple for those who know how it works (HTML5 app building is new to me).
I'm using Phonegap to build an app, problem however is that the default built from phonegap is portrait orientated. Atleast, that's what it seems. When I test the app on my ipad the width is adjusted fine, bu the height for some reason is bigger then the actual content of the body. I narrowed it down to this line:
When I remove height=device-height it works fine. With other words, I'm getting the wrong height of the device there. When on landscape, do I need to switch to height=device-width or something? Because that seems kind a weird, I would expect my height to change based on the orientation.
I think the code below solves your problem. You need to use
<meta name="viewport" content="width=device-width, initial-scale=1">.
and this structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
</head>
<body>
...content goes here...
</body>
</html>
Check more info on JQM Anatomy of a Page
to work with iOS screens have to make two views, one for landscape and one for portrait, measures ipad screen is 1024 × 768 pixels then I think you should handle them directly with numbers, or keep trying with the options PhoneGap gives
Related
I developed a website. The layout is fine in desktop. But it is not responsive. I tried for mobile with media queries like,
#media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}
I am using chrome development tools and make changes in the site according to the size 320 x 640. Now the problem is fine in simulator but not in the actual mobile.
Help me to find the solution.
The symptoms you describe suggest that you may not have a viewport metatag in the head of your page, so double check this first.
What you want is something like
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
More about viewport meta tags
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I have a responsive webpage that changes as the screen resolution changes, but for some reason, it loads the non-responsive version whenever I load the page on my iPhone:
http://rayku.com/register
The home page is fully responsive on the iPhone (http://rayku.com/home), but I'm not sure why the registration page isn't. Do you have any ideas?
I don't have an iPhone, so I can't test this, but it looks like you're missing a meta tag from your <head> tag. Try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this works.
You're missing the viewport meta tag (which is correctly present on the home page).
<meta name="viewport" content="width=device-width, initial-scale=1">
I have been working on a jQueryMobile App wrapped in phonegap with fixed footer.
In windows8 phones, while changing the orientation to landscape mode, the fixed footer is not aligned correctly in landscape mode only. The footer seems to have a bottom padding like behavior in landscape mode. In Portrait mode, it is aligned perfectly.
I am using jquery.mobile-1.3.2, and Phonegap 2.7.0.
I have been trying the fixes mentioned in the below URL's, but did not help:
https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8
stackoverflow.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height
gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/
Also tried some of the JS, jQM and CSS tricks, but no change affected for the footer.
A screen-shot of the page in Landscape mode is shown in the below link (You can see the black footer, even the footer text is not clearly visible):
http://goo.gl/8RICNG
For more clarity, a part of the header section is pasted below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
And my App footer code is:
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">
<div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>
Can any one please help me with a perfect work around as I am stuck with this issue?
Thanks in advance..
In Mainpage.xaml try changing the property
shell:SystemTray.IsVisible="True"
to
shell:SystemTray.IsVisible="False"
This will render the app in fullscreen mode and will reset your CSS to the entire page.This might fix your issue
I am working on a website: www.sc1.online-folio.com
for mobile and tablet devices I want to show this site 100 zoomed out (or maybe a little more) so user can see full site at first glance and zoom in the area he wants to view.
I am using this meta tag to zoom out
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
I set the width 1100 so the website look a little zoomed out for better viewing of slider area. This is all working fine on android devices but on ipad and iphone the site is zoomed like this: http://www.responsimulator.com/?url=http%3A%2F%2Fsc1.online-folio.com%2F and no changes in meta properties are working.
So guys can you tell me what exactly I do to control the zooming on iphone and ipad devices.
You have written the attribute incorrectly, replace the quote after width with a comma.
So that:
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
Becomes:
<meta name="viewport" content="width=1100, initial-scale=1.0, minimum-scale=1.0" />
But to answer your question, viewport is the thing!
I just got an html5 app with code that needs to be deployed to an iphone but the sizing seems to be totally messed up (it's like 4 times of the entire screen). As I have very little experience with html5 I'd like to ask, is there something else that needs to be set for the page to correctly fit onto a screen besides adding the
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
line in the index.html file?