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
Related
I'm trying to figure out why desktop client doesn't generate preview for urls from particular website.
For example, this url - https://est.ua/ru/press/9259664/
When I send this url from whatsapp on android, I correctly see a preview block.
When I send this very url from whatsapp on windows desktop, I don't see a preview block at all.
Steps to reproduce the issue.
Open whatsapp on android or ios phone (doesn't matter which one).
Open conversation with someone
Type in message box (without sending): https://est.ua/ru/press/9259664/
After a short while appears a preview of the url
Send message. Message appears in dialog, preview exists in the message.
Open whatsapp on windows pc
Open conversation with someone
Type in message box (without sending): https://est.ua/ru/press/9259664/
Preview of the url doesn't appear at all, no matter how long I wait
Send message. Message appears in dialog but doesn't contain a preview of the url.
The problem occurs on steps 9-10 (on windows). There is a difference between steps 4-5 (on android) and steps 9-10 (on windows).
Here is a screenshot of a problem:
The first message (15:33) has been sent from whatsapp on desktop, and it somehow doesn't have preview. The second message (15:35) has been sent from whatsapp on android, ant it does have preview.
The mentioned page contains required og: metatags (og:type, og:image, og:title, og:description, og:url, og:site_name) and is correctly validated:
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fest.ua%2Fru%2Fpress%2F9259664%2F
https://opengraphcheck.com/result.php?url=https%3A%2F%2Fest.ua%2Fru%2Fpress%2F9259664%2F
Tested on these:
Android Phone: Xiaomi Mi A3 (android 9), whatsapp: WhatsApp/2.20.47 A - ok
Windows: Windows 10 pro, version 1909 (build 18363.657), whatsapp: WhatsApp/0.4.930 N - issue
So I have a question. What's wrong with previews on whatsapp on desktop? Or maybe something wrong with this particular url, what exactly then?
I've found the issue for me personally was using WhatsApp in a corporate setting where SSL traffic (HTTPS) is being proxied. It seems that the self-signed internal certificates from the proxy cause the previews to not show.
I had the same problem a time ago and I just figured out how to solve this.
in the meta tags I had the og:image like this:
<meta property="og:image" content="images/image.jpg" />
And today I put the actual URL of the website instead of calling just the partial route and now the link preview works fine in WhatsApp Desktop. So now I have that og:image meta tag like this:
<meta property="og:image" content="https://www.{your_website_domain}/images/image.jpg" />
Also should make sure the source image is less than 300MB. Can't find an official statement on that. But did find that larger images wouldn't work and the same image of a smaller size (in bytes, not viewable pixels) worked. JPG can get smaller than PNG in most cases
Good reference https://stackoverflow.com/a/43154489/38841
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've done a lot of searching but haven't found any other reports of this specific issue. Please forgive me if this question is a duplicate!
I'm working on a project that involves downloading some HTML from a web service and displaying this HTML in a WebBrowser control in my app. The HTML contains an iframe and looks similar to this:
<!doctype html>
<html>
<meta name="viewport" content="width=320">
<body>
<div align="center">
<iframe src="https://some-url" height="600" frameborder="no">
</div>
</body>
</html>
My WebBrowser control:
<phone:WebBrowser x:Name="Browser" Margin="30" Background="Transparent"
IsScriptEnabled="True" ScriptNotify="Browser_ScriptNotify"/>
Code behind (pseudo):
string myHtml = GetHtmlStringFromServer();
Browser.NavigateToString(myHtml);
Problem 1: the site's certificate is not valid, so a certificate warning appears.
Problem 2: after I dismiss the certificate warning by pressing "Continue to website", the page does not load - on WP7 the WebBrowser just goes blank; on WP8 the certificate warning remains.
So, I have two questions:
How can I prevent the certificate error from appearing on the device of a consumer who has downloaded my app from the Marketplace? (I'm assuming I can't, but I'd be very glad to hear otherwise.)
How can I get the WebBrowser to display the page after the certificate warning has been dismissed? Currently, neither WP7 nor WP8 succeeds :(
I've knocked up a quick app in VS2012 to demonstrate the issue. It uses the web site "https://tv.eurosport.com" which currently has an invalid certificate. You can download the app here:
http://www.filedropper.com/webbrowserssltest
Do this:
--> Put your web site's certificate (.cer file) under root folder of your IIS site.
--> In your IIS add mime type for .cer file as file/download
--> Open a regular browser in your windows phone and point to the cer file (e.g., http:\myserver.com\cert.cer). Do NOT use Https
--> Browser will prompt to install certificate. Install it.
Go back to your app and it should work fine.
--> Send me kudos at rg#outlook.in if this worked fine :)
Rahul Gangwar
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'm working on a mobile website and on some devices (in my particular test, an iPhone 4) when visiting the site over 3G the images are compressed and look unacceptably fuzzy. When visiting the site over wifi (and clearing cache AND quitting Safari) the images appear as expected.
We've reduced the image size as much as possible without losing quality (between 2 and 26KB) and added the 'no-cache' fix recommended on another post:
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
Still no luck!
Is there anything else we can do to force the image quality over 3G?
Thanks,
Kev
It's the mobile carrier's proxy that modifies images.
The HTTP header cache-control: no-transform is what you are looking for see http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5 for full details.
It's not clear if all proxies respect it though.
Yep, easy to fix. Download Proxomitron and install as explained on their site. Be sure to add a shortcut to it in your Programs -> Startup folder so it runs when Windows boots.
In Proxomitron's Headers section (just click the button in the small window) add a new filter. Set the 'HTTP Header' to 'Cache-Control (out)', then set the 'Replacement text' to 'no-cache'. Ok it, then check the box next to it in the list under Out.
Proxomitron does a lot of cool stuff, and this simple fix makes Chrome work as expected without image compression via mobile 'broadband'.