Is there a way to disable zoom on a div, or any particular elements on a website? For example, if I wanted the page to be zoomable, but not the #Header div, is there a way to make one zoomable, and the other not zoomable?
Basically, when you zoom on a mobile device, it zooms the Header too, but I want the header to be a fixed size at all times (not zoomable).
I know that you can use this code to disable zooming overall:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
You can't do that without clever hacks.
However, you can (and should) use the following CSS to fix zoom issues on mobile devices:
header {
position: fixed;
...
}
#media only screen and (max-width: 720px) {
header {
position: absolute;
}
}
This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.
I don't think you can do that directly. One possible option would be to detect the zooming through js events and scale elements accordingly.
Another option would be to "break" the CTRL key to disable zooming on your website, but that's just a big no-no.
In shorter, you certainly can do that.
You can trap window resize events and resize your floating div according to the dpi change calculated from the various new window and inner width and height attributes.
So, when you zoom in, you want to shrink the floating div so it retains the original dpi, and vice versa.
This would be an epic fiddle - revisit this answer soon, since I may have to do such a thing. Already noticing some cross-browser inconsistencies with dpi, so yeah, fun.
Faced the same problem an ended up disabling panning/zooming
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
and selectively reenable it with this great lib
https://soulfresh.github.io/pan-z/?path=/docs/pan-z--pan-z
Works great without much configuration.
My html-structure is as follows
<body>
<header>Sticky unzoomed header</header>
<main id='main'>Zoomable content</main>
</body>
Then I enabled panzooming on the main element
const PanZ = require('#thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))
If you are using angular there is a way to give one id to your header div and then write the following code in controller:
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
I used in my project and it worked well..
Related
I'm having an issue trying to prevent the iPhone from resizing HTML e-mails to fit the screen. It seems that code below when put into the section has no effect.
My goal is just to stop the font re-sizing. I've tried other variations using -webkit-text-size-adjust:none; inline and in other way, all without success.
Would grealty appreciate any advice or an alternative solution.
#media screen and
(max-device-width: 480px){
/*fixes too big font in mobile Safari*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none; } } </style>
The iPhone seems to be a pain when it comes to resizing things, especially when you switch the orientation of the phone. Have you tried adding the meta tag with viewport settings in it?
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
It does prevent them from zooming, but I haven't found any better way to stop the iPhone from zooming on orientation change. I'm not sure if this will help in this situation, but just a suggestion to try out.
I been stuck w/ this problem and there's no available solution on the net that works.
Not until I realized what's causing this.
CAUSE:
This problem occurs if you have an image w/in the email. When the image auto-scale, the entire email/page will auto-fit in the window.
SOLUTION:
Add inline style for the image for min-width (300px so it doesn't take the entire 320px iphone width), max-width (your desired max with), and width of 100%.
i.e.
image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"
Worked for me, ...hoping this can help you too! ;-)
What you are doing is correct but the problem is that rather than using -webkit-text-size-adjust:none; inside a style tag, you should use it in the below manner:
<body style="-webkit-text-size-adjust:none;">
This means you should use this as an inline css property.
To get rid of that problem you have to put the following in your CSS body tag:
-webkit-text-size-adjust: 100%;
This way Safari keeps the text to 100% of intended size. In case you set the value to none, the users won't be able to increase the font and this is an undesired behavior.
This CSS property is supported and should work.
Check the official Safari supported CSS reference:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
Furthermore please note that the media type screen is supported in:
Safari 4.0 and later.
iOS 1.0 and later.
I hope this helps.
BR,
Tolis
A retina iPhone has a 640px width, your media query stops at 480px.
Anyway, you can get rid of the media query altogether. The only webkit based mail client that will use this property (-webkit-text-size-adjust:none) is iPhone's and iPad's Mail app.
Also the Mail app may also be the only client supporting CSS3
Is there anyway to apply this method from Chris Coyier to mobile phones: http://css-tricks.com/full-browser-width-bars/
I applied
html {overflow-x: hidden;}
To get rid of the horizontal scrollbar, but when viewing on an iphone for instance. There is a horizontal scrollbar.
You can view the site here: http://www.revival.tv/turningpoint/
Try adding <meta name="viewport" content="width=device-width" /> within the head tag of your page.
Try adding it to the body tag, too.
body {overflow-x: hidden;}
Find the the thing that's causing the scrollbar and get rid of it. Hiding overflow-x seems a bit of a sticking plaster to me - if you do it right in the first place you shouldn't need this. Using media queries allow you to set the width of the page at difference screen sizes. This means you can pretty much wrap you content in div and set its width at the different screen sizes
I am finding that the initial-scale attribute is crashing Safari for a web page that contains an embedded Google Map. http://w.pat.tc
Use this code
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Thats usefull for my moblie web http://www.sepatuonline-murah.com
This question already has answers here:
Disable Auto Zoom in Input "Text" tag - Safari on iPhone
(39 answers)
Closed 2 years ago.
The code:
<select>
<option value="1">Home</option>
<option value="2">About</option>
<option value="3">Services</option>
<option value="4">Contact</option>
</select>
When I touch select, the iPhone zooms in that element (and does not zoom out after deselecting).
How can I prevent this? Or zoom back out? I can't use user-scalable=no because I actually need that functionality. It's for iPhone, select menu.
This can be prevented by setting font-size:16px to all input fields.
UPDATE:
This method no longer works on iOS 10.
It depend from the Viewport, you can disable it in this way:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
add user-scalable=0 and it should work on your inputs as well.
For iOS, you can avoid zooming of input elements by simply allocating a font size to them that's considered sufficient by the OS (>=16px), thus avoiding the need to zoom, e.g.:
input, select, textarea {
font-size: 16px;
}
It's a solution also utilized by various frameworks and allows you to avoid the use of a meta tag.
This might be helpful to look at:
Disable Auto Zoom in Input "Text" tag - Safari on iPhone
You'd basically need to capture the event of tapping on a form element, then not run the default iOS action of zooming in, but still allowing it to zoom for the rest of the page.
Edit:
The link mentions,
2) You can dynamically change the META viewport tag using javascript
(see Enable/disable zoom on iPhone safari with Javascript?)
To elaborate:
Viewport meta tag is set to allow zooming
User taps on form element, changes meta tag to disable zooming
Upon pressing done, viewport is changed to allow zoom
And if you can't change the tag when clicking on a form element, put a div that mimics the form element that when you press it, it changes the tag, then calls the input.
The most up voted answer to set the font-size does not work for me. Using javascript to identify the client together with the meta tags in the answers here, we can prevent the zooming behavior of iPhone on input focus while otherwise keeping the zooming functionality intact.
$(document).ready(function ()
{
if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
{
$(document).on("focus", "input, textarea, select", function()
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
});
$(document).on("blur", "input, textarea, select", function()
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
});
}
});
It seems like we have to replace the meta tag with new values on the blur-event, just to remove it does not seem to trigger an updated behavior.
Note that the UI is still initializing the zoom, but it quickly zooms back out again. I believe this is acceptable and iPhone users must already be accustomed to that the browser is having some dynamic zooming going on anyway in applicable scenarios.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Not working anymore on iOS10.0.1
font-size:16px works
Setting the font size works perfectly for input elements, but not for select elements for me. For select tags, I need to actively disable viewport zoom when the user starts interacting with the select element, and then reenable it on finish.
//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})
$('select').focusout(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})
Just found a simple fix if you're using Bootstrap:
As mentioned in w3s: You can quickly size labels and form controls within a Horizontal form by adding .form-group-lg to the element.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="control-label">Large Label</label>
<div>
<input class="form-control" type="text">
</div>
</div>
See second example on this page:
http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp
Tested it in Safari and Chrome on an iPhone SE and it works like a charm!
So here is the final fix which works well for me.
#media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px !important;
}
}
here is the jQuery Solution works well for me.
device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input, select, textarea {font-size: 16px;}</style>');
}
Use maximum-scale=1 instead of user-scalable=no to prevent the form zooming issue without breaking the user’s ability to pinch zoom.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
We ran into this issue at my work and found a similar answer to #alex. We can manipulate the viewport tag if it is an iOS device:
document.addEventListener('DOMContentLoaded', event => {
if (/iPhone/.test(navigator.userAgent) && !window.MSStream) {
const metaViewportTag = document.head.querySelector('meta[name="viewport"]')
metaViewportTag.content = 'width=device-width, initial-scale=1, maximum-scale=1'
}
})
This prevents zooming form controls on focus in iOS and still allows Android to work as normal.
As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas?
Im using jquery.mobile btw :)
Update:
I actually managed to get the code from the first answer working somewhat:
function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );
The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me).
But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet.
Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.
use this view port specify your initial zoom level and maintain minimum and maximum zoom level
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I found this answer : https://stackoverflow.com/a/20477023/2525304
They are basically detecting when the user is reaching the top/bottom of the page and then catch the scrolling event with event.stopPropagation(); to prevent any more scrolling.
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).