Related
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 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
I would like to help with QWebView. I'm trying to create a software that will open a web page, so far everything was right, but I came across an issue with QWebView. On double click with the mouse is zooming.
WebView {
id: webviewHelp
anchors.fill: parent
smooth: false
url: "http://stackoverflow.com"
objectName: "webView"
}
This happens because of the use of mobile devices that need disabled some features that bring comfort to small devices. Put on head this code
<head>
<meta name="viewport" content="width=device-width; initial-scale=1;
maximum-scale=1; user-scalable=no;target-densitydpi=72;" />
...
</head>
Is that your full code?
If not then check for a onDoubleClick property, I'm not familiar with Qt5 much but on Qt4 it had to be a child of a Flickable then the onDoubleClick property a child of the WebView calling heuristicZoom.
I am creating a mobile web page that is basically a big form with several text inputs.
However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages?
This should be everything you need:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
For those of you late to the party, kgutteridge's answer doesn't work for me and Benny Neugebauer's answer includes target-densitydpi (a feature that is being deprecated).
This however does work for me:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
There are a number of approaches here- and though the position is that typically users should not be restricted when it comes to zooming for accessibility purposes, there may be incidences where is it required:
Render the page at the width of the device, dont scale:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Prevent scaling- and prevent the user from being able to zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Removing all zooming, all scaling
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Seems like just adding meta tags to index.html doesn't prevent page from zooming. Adding below style will do the magic.
:root {
touch-action: pan-x pan-y;
height: 100%
}
EDIT:
Demo: https://no-mobile-zoom.stackblitz.io
Mobile browsers (most of them) require font-size in inputs to be 16px.
And since there is still no solution for initial issue, here's a pure CSS solution.
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
solves the issue. So you don't need to disable zoom and loose accessibility features of you site.
If your base font-size is not 16px or not 16px on mobiles, you can use media queries.
#media screen and (max-width: 767px) {
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
}
You can use:
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
...
</head>
But please note that with Android 4.4 the property target-densitydpi is no longer supported. So for Android 4.4 and later the following is suggested as best practice:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
please try adding this meta-tag and style
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
Possible Solution for Web Apps: While zooming can not be disabled in iOS Safari anymore,
it will be disabled when opening the site from a home screen shortcut.
Add these meta tags to declare your App as "Web App capable":
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" >
<meta name="apple-mobile-web-app-capable" content="yes" >
However only use this feature if your app is self sustaining, as the forward/backward buttons and URL bar as well as the sharing options are disabled. (You can still swipe left and right though) This approach however enables quite the app like ux. The fullscreen browser only starts when the site is loaded from the homescreen. I also only got it to work after I included an apple-touch-icon-180x180.png in my root folder.
As a bonus, you probably also want to include a variant of this as well:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
Please Add the Script to Disable pinch, tap, focus Zoom
You can accomplish the task by simply adding the following 'meta' element into your 'head':
<meta name="viewport" content="user-scalable=no">
Adding all the attributes like 'width','initial-scale', 'maximum-width', 'maximum-scale' might not work. Therefore, just add the above element.
<header>
<meta name="viewport" content="user-scalable=no">
</header>
A pure "user-scalable=no" is sufficient and excluding other width and scale parameters should be fine for your case. In my case, I have just simply added the snippet on my . Tested on iOS 16.
Using this post and a few others I managed to sort this out so that is compatible with Android and iPhone/iPad/iPod using the following code. This is for PHP, you can use the same concept for any other language with string searches.
<?php //Device specific headers
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
if($iPhone || $iPod || $iPad){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}
?>
This may help someone: on iOS, my problem was fixed by swapping <button>s for <div>s, along with the other things mentioned.
The solution using a meta-tag did not work for me (tested on Chrome win10 and safari IOS 14.3), and I also believe that the concerns regarding accessibility, as mentioned by Jack and others, should be honored.
My solution is to disable zooming only on elements that are damaged by the default zoom.
I did this by registering event listeners for zoom-gestures and using event.preventDefault() to suppress the browsers default zoom-behavior.
This needs to be done with several events (touch gestures, mouse wheel and keys). The following snippet is an example for the mouse wheel and pinch gestures on touchpads:
noteSheetCanvas.addEventListener("wheel", e => {
// suppress browsers default zoom-behavior:
e.preventDefault();
// execution of my own custom zooming-behavior:
if (e.deltaY > 0) {
this._zoom(1);
} else {
this._zoom(-1);
}
});
How to detect touch gestures is described here: https://stackoverflow.com/a/11183333/1134856
I used this to keep the standard zooming behavior for most parts of my application and to define custom zooming-behavior on a canvas-element.
document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });
I've tried all three of these to no avail:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />
each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working
I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalable value present, still no luck.
UPDATE
Got this from Apple's site and it works:
<meta name="viewport" content="width=device-width, user-scalable=no" />
it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops
Edit: may not work after iOS 10, please see touch-action based solution below.
Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.
This works for me on Mobile Safari in iOS 4.2.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
For the people looking for an iOS 10 solution, user-scaleable=no is disabled in Safari for iOS 10. The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages.
From release notes:
To improve accessibility on websites in Safari, users can now
pinch-to-zoom even when a website sets user-scalable=no in the
viewport.
So as far as I understand, we are sh** out of luck.
#mattis is correct that iOS 10 Safari won't allow you to disable pinch to zoom with the user-scalable attribute. However, I got it to disable using preventDefault on the 'gesturestart' event. I've only verified this on Safari in iOS 10.0.2.
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
Using the CSS touch-action property is the most elegant solution. Tested on iOS 13.5 and iOS 14.
To disable pinch zoom gestures and and double-tap to zoom:
body {
touch-action: pan-x pan-y;
}
If your app also has no need for panning, i.e. scrolling, use this:
body {
touch-action: none;
}
for iphones safari up to iOS 10 "viewport" is not a solution, i don't like this way, but i have used this javascript code and it helped me
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
I got it working in iOS 12 with the following code:
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
window.document.addEventListener('touchmove', e => {
if(e.scale !== 1) {
e.preventDefault();
}
}, {passive: false});
}
With the first if statement I ensure it will only execute in iOS environments (if it executes in Android the scroll behivour will get broken). Also, note the passive option set to false.
I managed to stop this behavior by adding the following to the HTML header. This works on mobile devices, as desktop browsers support zooming when using the mouse wheel. It's not a big deal on desktop browsers but it's important to take this into account.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
and the following rule to the CSS stylesheet
html {
-webkit-text-size-adjust: none;
touch-action: manipulation;
}
Actually Apple disabled user-scalable=no on latest iOS versions.
I tried as guideline and this way can work:
body {
touch-action: pan-x pan-y;
}
user-scalable=0
This no longer works on iOS 10. Apple removed the feature.
There is no way yo can disable zoom website on iOS now, unless you make gross platform app.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
additionally
<meta name="HandheldFriendly" content="true">
Finally, either as a style-attribute or in your css file, add the following text for webkit-based Browsers:
html {
-webkit-text-size-adjust: none
}
This works fine in IOS 10.3.2
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);
thank you #arthur and #aleclarson
In Safari 9.0 and up you can use shrink-to-fit in viewport meta tag as shown below
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
sometimes those other directives in the content tag can mess up Apple's best guess/heuristic at how to layout your page, all you need to disable pinch zoom is.
<meta name="viewport" content="user-scalable=no" />
As mentioned this solution basically works as of late 2020:
document.addEventListener(
'gesturestart', (e) => e.preventDefault()
);
But the downside is that while you are scrolling you'd still be able to pinch and then it gets stuck.
The solution is to disable scrolling.
body {
overflow: hidden;
}
But, what if you still wanted the page to be scrolled?
You can still do it with another <div> set as overflow:auto:
<body>
<div id='app'></div>
</div>
and then
body {
overflow: hidden;
}
#app {
-webkit-overflow-scrolling: touch;
height: 100vh;
height: -webkit-fill-available;
overflow: auto;
}
I tried all above things but this worked for me on IOS devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
As of today (Oct. 2022) with iOS 14.8, the ONLY way I could completely prevent the double tap zoom was this:
document.addEventListener("click", (e) =>
{
e.preventDefault();
})
Even this:
* {
touch-action: none !important;
}
(which is obviously not realistic, but just for demonstration purposes) wasn't enough in every case. It turned out that any for element on which I had handled click, double tapping on it would cause a nearly irreversible zoom-in, completely ignoring the touch-action setting. But if I called preventDefault() in the click handler, it would not zoom. So, doing this at the document level so far seems to be enough, so that I don't have to do it every time I handle click.
I have no idea what side effects this might have, but I'm sure folks will chime in if they think of any.
In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA). You can read more about it here: Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification
I foolishly had a wrapper div which had a width measured in pixels. The other browsers seemed to be intelligent enough to deal with this. Once I had converted the width to a percentage value, it worked fine on Safari mobile as well. Very annoying.
.page{width: 960px;}
to
.page{width:93.75%}
<div id="divPage" class="page">
</div>
This one should be working on iphone etc.
<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">