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' />
Related
I'm building a web-app and I would like to display it as a full-screen app in Windows 8. The result should be something else like in safari on an apple iPad:
Safari:
I've added these two meta-tags in my index.html:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
Then I opened my web-app in the safari of my iPad and added the site to my homescreen. After this, I got an icon on my homescreen and when I open it, there is my web-app in full-screen, without the browser-containers around it.
Can I do something else with the same web-app on Windows 8? I thought, I could create a metro app, when I add the site to my apps in Internet Explorer. But I think, I also need some meta tags. I found many tutorials on the web, but nothing worked for me.
I suggest that you create a Windows Hosted Web App
http://microsoftedge.github.io/WebAppsDocs/en-US/win10/HWA.htm
Using the Microsoft App Studio, you can do it in minutes
http://appstudio.windows.com/projects/create
I created a website based on Joomla and I use google fonts in it, i.e. in the head part of the document I have:
<link href='http://fonts.googleapis.com/css?family=Lato|Merriweather+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
and I see it in source of the page, when I browse to the web site.
In my windows xp underwhich I programmed it is working sure because I downloaded the fonts and installed, to do design under photoshop!
Browsing it to mobile phone or my other OS (windows 8, etc.) font will not appear!
What could be the reason please?
Edit:
I already added CORS header in joomla too! Still not working. I have #import(...) of the font correctly in my css. All spelling is ok and all is working in the windows system where I have the font installed. Why not working / downloading in other OS/browsers, remains a mystery to me!
cross check the name of the font in your CSS file with its name in the Google fonts page
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'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.
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