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.
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 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'm web developer.
I developed my mobile website use 'viewport' option in html for responsive mobile website.
Then, I assigned meta data like this below:-
<meta name="viewport" content="width=320"/>
But my web site occurs right margin(below pic is part of my web site menubar)
How can delete right margin? .... Thanks for your help!
enter image description here
....
Write this and try if it works...
<meta name="viewport" content="width=device-width, initial-scale=1">
You can need to change your media query to this and this would difinilty work for your in website. Please vode if i m correct.
<meta name="viewport" content="width=device-width, initial-scale=1">
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
EDIT:
By giving static width, you are already loosing the responsiveness. Instead use device-width which would automatically take the device's width.
max-scale=1.0 and user-scalable=no wouldn't allow the user to pinch zoom on the mobile. If you want to let the user zoom in on the website, you can remove these two
My design works fine (it's a circle object with rotate functionality) with meta tag <meta http-equiv="content-type" content="text/html; charset=UTF-8"> but when I fit that design into any responsive template it won't work.
Reason I find out is that every responsive template e:g: bootstrap,foundation,skeleton etc. use metatag <meta name="viewport" content="width=device-width, initial-scale=1.0">
http://prefortune.com/rotate/bootstrap/
You can click on changeview link in responsive mode on above link it will change view and circle design will be fit properly but toggle menu will be loss. (On click I am removing content of viewport metatag content.)
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
Error Code
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are using Bootstrap you can try this.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
Starting at line 315 in your HTML you have
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
It looks to me that this path to jquery may not be correct, and as a result the bootstrap js isn't working, and this would cause a problem with the toggle menu.
This may not be the full answer to all your questions, but a good place to start.
Another issue I notice is that the source document for your iframe isn't responsive: http://prefortune.com/rotate/
If you view this on a narrow viewport the layout breaks, so this might need some attention as well. Iframes with responsive design can complicate your life and to begin you would need to add a viewport meta tag to this page as well.
Good luck!
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