I'm trying to do a zoom out on the viewport to .8 for heights bellow 1080.
So far I've done this:
HTML HEAD
<meta name="viewport" content="width=device-width, initial-scale=1" />
CSS
#media screen and (max-height:1079px){
#viewport {
width: device-width;
zoom: .8;
}
}
No prefix since I'm using firefox to test it.
Any ideas?
Thanks!
Since you mentioned Firefox, the problem is that Firefox, as of versoin 37, does not support the #viewport at rule. Since Firefox has a unresolved bug on the issue from 2012, you might want to try an alternative such as reducing font-size to .8em.
If you check the Firefox console, you will see this css error:
Related
I want that my site uoga.onclick.lt in mobile devices would be zoomed out to fit all content.
My tag is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried lots of changes like changing initial-scale and other option changes, but it's still loads like this:
Device is SONY Xperia Z2, but i tried with Samsung NOTE 2 and nexus 5, the results are the same...
This did the trick
<meta name="viewport" content="width=500, initial-scale=0.2">
Tested on Sony Z2, Samsung Note 2, Samsung galaxy s5, Nexus 5.
I really don't know why content="width=device-width" didn't worked...
If you want to see the result, i changed server - uogauoga.itgirnos.lt
I know this is an old question, but I just noticed if you set the width which is larger than your screen for body or html element, the viewport won't work as expected.
e.g.
body
{
width:1080px;
}
Just came across this issue and I have similar problem as #Charlie but different solution. In my case I had pre tags that had long lines, so in fact the width of the body was large (hence similarities):
the fix:
<style>
pre {
white-space: pre-wrap;
}
</style>
So I pushed a site to http://austinenl.com however it appears that on iPhones, it appears really zoomed out. From my research, I needed to add
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
However, after adding this, I am still getting reports that the site looks bad on iphone. I can't find any other source that will give any other suggestions on what would cause this issue, so I am hoping someone here can help.
Instead of using: <meta name="viewport" content="width=device-width; initial-scale=1.0;">, which uses a semicolon.
You could try using: <meta name="viewport" content="width=device-width, initial-scale=1">, which uses a comma.
If have been using the second option for years now and everything has been working fine. This is the way as Apple intended it. See the Supported Meta Tags.
Edit: I've checked your CSS and I've found some rules which I'm not sure where they are used for, but removing them seems to help.
.area-checkboxes {
display: -webkit-flex;
}
.area-checkbox {
min-width: 250px;
-webkit-flex: 1 1 250px;
flex: 1;
}
Both found in style.css
Try adding a width of 100% to the body and get back to me
html,body{width:100%}
I have added some css media queries but it doesn't seem to make any change, I mean I have added this code
#media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}
but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference, am i missing something here ? do i have to add something more than this in my css to make it work ?
below given is my default css for both classes
.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}
My advice would be to test the code in a real mobile phone not with a browser if that's what you are doing cause browsers behave differently
Another important thing you must do is add meta view port tag without that it won't work like the one given below
<meta name="viewport" content="width=device-width, initial-scale=1" />
Remove !important from your default css use css specificity instead if its really necessary so your default css should be
.leftSideBar{display:block;}
.rightSideBar{display:block;}
if even that doesn't work you have to show us your entire css or html to identify the problem
Everything looks fine in your code.
Try with this meta in your html :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, if I can give you a little advice, try the mobile first way. It looks like this :
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
#media screen and (min-width:640px) {
/*design for screen-width >= 640px */
}
This gives a priority on mobile devices so computers will be set as the exception in order to have less code executed on mobile devices which are quite less powerful than a computer ;)
here is a little / great tutorial on mobile first approach :
http://www.html5rocks.com/en/mobile/responsivedesign/
Good luck and give your html and full css if it's still not working.
The min-width and !important are probably useless. The query is fine, but it may be shortned to just:
#media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}
Should be working either way. Are you sure the html is fine? You may want to show that here as well.
This code is the best for mobile friendly responsive web:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Now I have read a couple SO answers about this question, but I have tried them all with no luck. I have found that that website I have been developing on I have had my browser zoom set differently than the default zoom size. I want to accommodate for people that may still have the default zoom size. Being the curious guy that I am, I wondered if I can change the browser size for that window. If the user wants to zoom in or out after they load page that's up to them, but I wanted to see if there was a way to have a default zoom so that it looks how it should.
Some things that I have tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Tried this and literally nothing changed on my browser. I set it to default just to check as well, and even after changing all the numbers it never made a difference.
So I came across a different way to do this, in CSS and same thing nothing happens at all.
#-viewport
{
zoom: .5;
}
So now I am on SO. I'm not even 100% positive that what I am trying to do is the right way to do it. I could be doing something completely off track, so that's why I am asking this question.
Basically, how do I achieve a default zoom size for the size on load, and what is the syntax for it?
Try: user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
And:
#-webkit-viewport { zoom:100%; }
#-moz-viewport { zoom:100%; }
#-ms-viewport { zoom:100%; }
#-o-viewport { zoom:100%; }
#viewport { zoom:100%; }
I want to disable Pinch and Zoom on Mobile devices.
What configuration should I add to the viewport ?
Link : http://play.mink7.com/n/dawn/
EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.
Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Add this in for devices that can't use viewport too:
<meta name="HandheldFriendly" content="true" />
this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gestureend', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
jsfiddle: https://jsfiddle.net/vo0aqj4y/11/
This is all I needed:
<meta name="viewport" content="user-scalable=no"/>
To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.
But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.
I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:
html, body {touch-action: none;}
You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.
Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?
Found here you can use user-scalable=no:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.
Disable pinch to zoom in IE10
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
Disables iOS pinch-zoom
window.addEventListener(
"touchmove",
function (event) {
if (event.scale !== 1) {
event.preventDefault();
event.stopImmediatePropagation();
}
},
{ passive: false }
);
Tested on iOS 15.3 in Safari and Brave.
Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.
Not sure is this could help, but I solved the pinch / zoom problem (I wanted to avoid users to do zooming on my webapp) using angular hammer module:
In my app.component.html I added:
<div id="app" (pinchin)="pinchin();">
and in my app.component.ts:
pinchin() {
//console.log('pinch in');
}