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
Related
Like the title says, when I open my html file, it looks weirdly zoomed in. I checked the browser setting and its at 100% zoom. But what is even weirder, when I zoom out to 90% and then zoom in again to 100%, the webpage looks like how I intended it to look like.
I am very new to web development. Any clue as to what might be causing this issue?s
Edited to make question clearer:
This is what I have in my head tag.
I only use css, no scss or anything like that. I write code in visual studio.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Personal CSS -->
<link rel="stylesheet" href="homepage_style.css">
<!-- Google Font "Karla" -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Karla">
<!-- Font Awesome Library -->
<script src="https://kit.fontawesome.com/f4b0af8bdd.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
I have tested your code, and it works well for me. So by the look of it, it should be the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> line.
This line makes your page adapt to the user's screen resolution and scale. As we may have different screen resolutions, or simply the body I used to test ( a simple Lorem Ipsum ) could be so much different than yours, it didn't gave me that issue.
As I don't know the contents of your website, i will recommend you to remove the shrink-to-fit=yes as it should be what it is causing this.
That may affect other contents, so maybe you could use some Bootstrap ( you may already be using it ) to readjust some parts of the page if they get misconfigured.
I have this angular app, and I want to add a responsive design for mobile version too, right now it looks horrible, I read about <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"> but is not working.
On my browser or on my phone it looks like that, if I change my phone to horizontal, I can see the page well.
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cv</title>
<base href="/" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
<link rel="icon" type="image/x-icon" href="resumePhoto.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.13.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.13.2/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
</html>
You can find the repository in my github or here is the link of the app.
A funny thing is that if I change the value in the inspector let's say I change the scale from 1 to 1.1 it works, and if I return it to 1 I'll keep working, but at the beginning, it seems to be ignored.
My problem is that it looks chopped, it doesn't matter if a try to scroll to the right I don't see my top navbar.
Edit
I tried to add media queries, but I discovered something, my navbar is still there, I just can't see it but I can click on the buttons, and it looks like the header-nav takes more than the width of the device, in the next image you can see that the width is 310 px but the header-nav 520 from clarity takes the value of, perhaps that's why it looks weird, I'm thinking it has something to do with the project clarity classes
In addition to your line here:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes>
You need now to add some #media-queries for each size of screen you want your app to work on. You need to add those #media-queries to your css stylesheet so that it adjusts on whatever size. For example:
/* iPhone 6+/7+/8+ */
#media only screen and (min-width: 414px) and (max-width: 414px) {
// adjust the elements with css
}
You can set min-width or min-height or whatever you want to adjust to landscape modes etc.
More about media queries here
Ok at the end, I find out the problem was I didn't read the whole documentation for project clarity, their components already have that responsive parts that normally you would do with #media queries, but turns out I have to add some properties to them to make them responsive.
In the end, I didn't have to add any #media queries, and it wasn't a problem of the viewport, I just added the property [clr-nav-level]="1" to my header and that fixed it.
<div class="header-nav" [clr-nav-level]="1">
Here is the documentation in case you want to read it.
I'm running a simple Flask server on Ubuntu, basically a beginner with web apps. When I request a page through Firefox, the screen flashes briefly with the raw HTML before the CSS is applied.
I thought this was a problem with the way the CSS is specified in the HTML (as I found in a few suggestions) but it doesn't seem to be the case because my other browser Brave doesn't have this problem, not even when the CSS resource is requested for the very first time or if I disable caching from the Network tab and refresh repeatedly. It always loads correctly without any flashing or flickering (to my eyes anyways). Below is the current HTML head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title>
<!-- <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div> -->
<link rel="stylesheet" href="../static/styles/bulma.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> -->
</head>
Has anyone experienced this issue and is it browser specific? What is the simplest way to resolve it?
I am working on a web-app and in testing on iPhone X using the Simulator, the status bar is completely black. How do I make my website cover the entire screen? I am not using any library; I have seen many questions mentioning something called Cordova but what I have is just HTML with CSS.
Here is my HTML code in the head.
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="viewport-fit=cover, width=device-width, initial-scale=1.0" name="viewport">
<title>My PWA</title>
<link rel="stylesheet" href="/assets/styles/design.css">
</head>
It is possible, but requires a few lines more. Here is how to do it. Strictly speaking I don't think you need width=device-width and initial-scale=1.0, I added it since you use it. The launch.png is your launch image that will show if your page takes time to load, and it should be a 1125 x 2436 PNG image and also be placed on your server, of course. It is required to make it work. As is the black-translucent status bar style and the viewport-fit=cover.
Also note that if you already have created a shortcut to your page you must remove it and create it again after you have updated your page with this content.
<html><head>
<meta charset="utf-8">
<link rel="apple-touch-startup-image" href="./launch.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name='viewport' content='viewport-fit=cover, width=device-width, initial-scale=1.0'>
<title>Test</title>
</head>
<body>
content
</body>
</html>
The above will stretch your viewport all the way to the top for iPhone X (and other models), setting the top bar content (clock, battery status, signal strength etc) to white on transparent. If you have a white or very light colored background this probably doesn't look very good. Unfortunately there is no way to have have dark content on your own background. However, there are a couple of options that might be good enough.
Setting the apple-mobile-web-app-status-bar-style to default gives you a black top bar content on a solid white background plate. This will look fine if you can accept your content to have a white top bar background and scroll under it.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Another option is to set apple-mobile-web-app-status-bar-style to black. This is more of a convenience, which creates a solid black background with white top bar content, effectively resulting in a reverse of using default.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Here are samples of how the different content parameters will look. Not iPhone X but the color schemes are same.
Read here if you need to account for the different top bar heights on different iOS devices.
I face same issue and solved by adding below code to Public --> index.html
<meta name="theme-color" content="#FFF" />
Since iOS 14 and introduction of dark mode on iPhones, Apple has made some changes. If you are looking for white or black bar around the notch (depending on light/dark mode) you can add the following metas:
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: light)" content="light-content" />
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: dark)" content="dark-content" />
Color of the bar will adapt automatically on dark mode activation or deactivation.
More options and explanations available here: https://firt.dev/ios-14.5/#status-bar-change
You can't. iOS doesn't support fullscreen.
https://caniuse.com/#feat=fullscreen
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 :)