In my windows phone 8 application, I want to open a page in web browser.
For that I have taken WebBrowser.
<Grid x:Name="ContentPanel" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0">
<phone:WebBrowser x:Name="addComBrowser" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" MinWidth="480" MinHeight="796" />
</Grid>
Now in the code behind file I've set the url.
Uri uri = new Uri("http://blablabla.....");
addComBrowser.Source = uri;
Now when I run the app, The content in the browser displaying in very small size.
Below is the output.
How should I increase the font size of how should i increase the zoom level.
Thanks.
If you can change the HTML maybe you can add the viewport metadata:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Insert this in between <head> and </head> in your html
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
Related
I've added meta tags to show summary_large_image box for twitter share. Once the twitter share window pops up, it looks like this:
Once I clicked Tweet, the summary_large_image can be displayed correctly with no problem. Here is the meta code:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="patch-package is like a bandage. It saved my life!!!" />
<meta name="twitter:image" content="https://image.mux.com/d4OkE5whZfyg1VJogOTf8AAHcMG00ak24h6JQYWNo/thumbnail.png?width=700&height=400" />
<meta name="twitter:site" content="#lonelydotdev" />
<meta name="twitter:title" content="react-video-recorder works in firefox now!!!" />
But what I really want to see in the share window is something like following, where it not only has the url link, but has some text description, as well as via #username in the end:
How can I automatically inject the description and site owner to the share textarea? Thanks!
I am using react-share npm package. It has via, related, title such parameters that I can use to inject those text.
https://www.npmjs.com/package/react-share
I have a habit of looking at the code of many of the websites I visit and have seen the viewport defined in many different ways.
I have seen this
<meta name="viewport" content="width=device-width, initial-scale=1 " />
and this
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui" />
and this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
and this
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 " />
I thought about combining all of them into something like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
But is there any benefit in that?
What is the best way?
width=device-width
this means we are telling to the browser “my website adapts to your device width”
Initial-scale
This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.
Maximum-scale
Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.
Minimum-scale
Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.
User-scalable
User-scalable assign 1.0 means website allow to zoom in or zoom out.
But if you assign User-scalable=no its means website not allow to zoom in or zoom out.
Hope this help you!
Above is Sky Dreams answer on the following question: What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
Please review the following links:
Maximum-scale=1.0: http://a11yproject.com/posts/never-use-maximum-scale/
User-scalable=no: To "user-scalable=no" or not to "user-scalable=no"
Minimal-ui: http://www.therightcode.net/use-minimal-ui-in-viewport-meta-tag/
My app in firefox and internet explorer looks zoomed in. Is there a viewport setting the load the website more zoomed out?
This is my current index.html settings in my angular 2 app:
<base href="/"></base>
<meta charset="UTF-8">
<meta name="fragment" content="!"/>
<meta name="application-name" content="test"/>
<meta name="description" content="test"/>
<meta name="keywords" content="test"/>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<link rel="icon" type="image/png" href="/favicon32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon16.png" sizes="16x16">
Try this
<meta name="viewport" content="width=device-width, initial-scale=1" />
Try setting a layout width that's wider than the device screen, e.g:
<meta name="viewport" content="width=980">
The browser will only zoom out as far as there's content so I'm guessing what's happening now is that all your content is narrow and the browser can't zoom out any more. Setting the width in the viewport <meta> will make the <html> element fill that width so the browser should be able to zoom out further, assuming you're using a screen that's less than 980 CSS pixels wide (in the example above).
As per this page, I used the following code to set my viewport to the zoom level (or lack thereof) that I wanted:
#-ms-viewport {
width: 1024px;
height: 768px;
}
I'm working on a horizontal scrolling website/infographic, which is just a single page, and having it zoom in was totally ruining the experience. This worked for me!
Background : I am trying to modify my existing web application for Windows Phone 7. My development environment is Microsoft Visual Studio 2010 premium and I've installed Windows Phone SDK 7.1. My web application contains HTML and CSS only. The web browser on the emulator is Internet Explorer Mobile 9.
Problem : I'm unable to get my web pages to display full screen (The width is fine but the height of my page is only around 80% of the display area and the remaining 20% is shown plain white.
For example, I tried to get a background image for my page and display it full page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="no-cache" />
<title>index</title>
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 500px)" href="mobile.css" />
</head>
<body>
<img src="background2.jpg" id="bbg" alt=""/>
</body>
</html>
Following is the mobile.css:
#bbg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
How could I correct this? Any ideas??
EDIT (The solution)
As Fabian mentioned in the accepted answer, here's what I had to add to my mark-up:
<meta name="Viewport" content= "height= device-height; user-scaleable=no; initial-scale=1.0" />
Try setting your meta viewport tags up properly. These control the scaling of the page within the browser window.
If this still doesn't help, try setting your background image to the device resolution (800x480px) and see if that helps.
Maybe it's caused by not specifying shell:SystemTray.IsVisible="False" in the xaml file.
<phone:PhoneApplicationPage
....
shell:SystemTray.IsVisible="False">
...
This code removes the upper "status bar" for standart Windows Phone Silverlight apps
I am working on application in Phonegap (essentially mobile browser wrapped around HTML5 page), that need their initial width to be equal viewport width when started, but allow user for rescale. So far I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
(...)
<img src="foo.jpg" style="width:100%" />
Didn't work, on Android 2.2 and 2.3 - it scaled img while user scaled viewport via gesture
And:
<meta name="viewport" content="width=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
(...)
<img src="foo.jpg" style="width:480px" />
This also didn't work on Android - it produced img of about 4/3 of viewport size on start (so user was able to scroll right).
I am probably missing something obvious, but searching Google so far didn't gave results I want
EDIT: It seems to be bug in PhoneGap, second code is working outside PhoneGap
It was a bug in Phonegap (2012). It is long fixed since then :)