I'm currently working on a mobile website. Everything is working fine on both iOS and Android, i'm however experiencing problems with the viewport meta tag on Windows Phone when trying to set the width of the viewport to 640px. I'm using :
<meta name="viewport" content="width=640,user-scalable=no"/>
However it seems that whenever you are trying to set a viewport greater that 480px Windows phone automatically applies to default viewport (1024px).
Any Workaround ?
I haven't had much success with <meta name="viewport"> and Windows Phone 7.5 unless I set width between 320 to 480 (inclusive). If I want to set it outside of that range it seems to just default to 320.
I tried just using <meta name="MobileOptimized" content="640"> and that worked perfectly. It behaves like <meta name="viewport" content="width=640,user-scalable=no">.
According to this article and the article linked to by in Mikael Koskinen's Answer the range should be 320 to 10,000 but I haven't been able to reproduce that.
The Windows Phone team blogged about Windows Phone browser viewport some time ago. They don't have examples for widths' greater than 480 but maybe you can find some tips from there, like using the dynamic viewport sizing.
Note that the blog post applies to Windows Phone 7.5 (Mango) only.
Related
I've created a mobile webbased game and use the "Add to homescreen" feature to allow users to add it as an app to their iOS devices.
However, recently it started malfunctioning. It has always worked without problem but started acting up possibly after the iOS 8.3 update. This is the code in my head, which has not been changed recently so should not be the problem:
<meta name="viewport" content="width=590px, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
When I get to the login screen it works without problem, however after logging in in landscape there are suddenly margins to the left and right. If I log in in portrait there are no margins. If I rotate the phone from landscape with margins to portrait it displays normally, if I rotate it back the margins suddenly increase by a lot and if I then try to rotate the device again it crashes.
I have taken some screens to show the problem:
http://i.imgur.com/o2Jr8af.png
http://i.imgur.com/Q6ZOXuj.png
http://i.imgur.com/7bGoc42.png
http://i.imgur.com/Mh8hsml.png
After that last screenshot the webapp just crashes. It only shows this behaviour in the webapp, if I access the game through Safari, my Android app (which loads the website in WebView) or the desktop with a simulated user-agent the website functions properly.
I've tried deleting the webapp, rebooting my phone and adding it back to my homescreen to no avail. I first guessed it was a caching issue but that should have been then resolved after viewing the website correctly in Safari.
For those wanting to try themselves, the game is www.reincarnationgame.com
im making hybrid app only for android, and designer gave me 480px(minimum size) layout.
i declared meta view port like this...
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=high-dpi " />
also the my css is
body {min-width:480px; height:100%;}
the problem is when i test on my phone, almost every browser shows perfectly! But Except Mobile Chrome Browser. it shows layout bigger and overflow on the screen...
what did i have wrong ?
To my understanding, Android devices don't use the viewport. iOS devices do. You CSS is actually taking over. So depending on your device's initial width, smaller than 480px, your layout will overflow because of the min-width. Your best bet might be to use the min-width:320px and width:100%.
Try that.
What do you mean by the "mobile Chrome browser". You mean the native browser that comes predownloaded on the phone or the Chrome browser you download from the Play Store?
I'm developing a mobile web application and I have been given some pretty strict style guidelines from the designer. In all other mobile OSes I have stopped the OS from auto creating a link from the phone number in the listing page...However I can't accomplish that in WP7.
For the others I used
<meta name="format-detection" content="telephone=no" />
Any ideas how to do this in WP7?
I've had the same problem. In fact, the phone number, fax number and address do not show up at all regardless of the CSS. There's not much return on that. Until a proper solution is found I have resorted to adding a space between every number/letter in the address and phone numbers and then changed the letter-spacing to -2px in CSS to tighten the spacing back up. WP7 no longer recognizes them as an address or phone numbers and they look just as they would otherwise.
I am trying to write a phonegap app with GWT for windows phone 7. I have the following in my module.
RootPanel rootPanel = RootPanel.get("wrapper");
AbsolutePanel ap = new AbsolutePanel();
rootPanel.add(ap);
ap.setSize("480px", "800px");
I add my components in the AbsolutePanel. And in my css I have the following.
#wrapper{
width:480px;
height:800px;
margin:0 auto;
background-color:#FF0000;
}
When I compile this and put it on the Windows Phone it is really small compared to what it is on my desktop. Is there some setting I should be using to make it 480*800? Also the images do not seem to be showing, but they do show in my desktop app.
The issue is likley that you're not setting the ViewPort for the page.
By default it's set to around 2000. (I can't remember the exact value off the top of my head.)
Try something like:
<meta name='viewport' content='width=device-width,height=device-height' />
I've built an example with web-browser in windows phone 7. When I load an html file which created by myself, I can double click on web-browser to zoom in/ zoom out the content. But, when I load an web-page (ex: google.com) I can't.
I uploaded my example to my skydriver account. You can't get it at http://cid-b65eb4d185de7cfc.office.live.com/self.aspx/.Public/Shared/Sandbox.WebBrowser.zip
If you known the reason why, please help me.
I think the reason lies in the meta tags within the HTML headers from Google.
I'd guess that Google have fixed the viewport to not allow zooming:
<meta name="viewport" content="user-scalable=no" />
See this post http://blogs.msdn.com/b/mikeormond/archive/2010/12/16/displaying-html-content-in-windows-phone-7.aspx