I implemented a div in mobile safari that has the same width as the device width and larger height than the device height:
I have used this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
However, I can still scroll the screen. That means if you scroll to the left, some blank space will appear at the right hand side. I have tried the following:
$(document).on(isMobile ? 'touchmove' : 'mousemove', function(e) {
e.preventDefault();
});
This does prevent the scrolling. However, I only want to prevent scrolling on the X direction. Is there a way to do this?
Bit long for a comment. If your viewport settings are correct, it should really be as wide as the screen and scrolling should not be permitted. One possibility is that you have some element that went beyond the size of the viewport. But it's also possible that the device-width on the viewport is wrong. Forexample, for iphone/ipods, the width of the screen on portrait orientation is only 320px as opposed to it's 640px actual-pixel-count. If the device-width somehow gets 640px instead of 320px, your viewport is twice as large.
Try experiment with different viewport widths.
Related
I am a bit confused about the concept of viewport in JavaScript and in the DOM, especially document.documentElement.clientWidth that should return the width of the viewport.
In fact, document.documentElement is the html element, and regardless if I already set a fixed width in px of the html element, clientWidth will return the viewport dimension.
Now, when I studied CSS I learned that the mobile browser has two viewports, the default viewport and the ideal viewport. The default viewport is useful for a browser without responsive techniques. The ideal viewport is the viewport used when I have provided RWD mechanism (In this case I have to use <meta name="viewport" content="width=device-width, initial-scale=1.0"> and media query ).
For example, the iPhone 5 has a physical screen width of 640 px, but its ideal viewport is 320 px. Furthermore, there is the concept of visual viewport and layout viewport that comes into play when there is zoom, for instance.
Now I would like to know from document.documentElement.clientWidth which viewport dimension returns both on desktop computer and mobile phone (if there are differences). Because I tried, and I find that window.innerWidth/Height (the browser content area) is almost always the same value of document.documentElement.clientWidth/Height(except for scroll, margin, and border pixel values).
How is it possible? Is there a different meaning of "viewport" in JavaScript DOM that I'm missing?
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experiment</title>
<style>
p{
float:right;
width:20%;
}
</style>
</head>
<body>
<p id="par">Hello</p>
<script>
console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
console.log(screen.height);
console.log(screen.width);
</script>
</body>
</html>
results in (I'm in remote debug from my pc to my Samsung Galaxy A5, with a local server that serve my web page ):
560//browser window viewport (innerHeight)
360
560//viewport (document.documentElement.clientHeight)
360
640 //screen size
360
The viewport and the browser viewport are the same. I can accept it so far. Now the same page but I get out of the way this metatag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and i get:
1524 //browser window viewport (innerHeight)
980
1524 //viewport (document.documentElement.clientHeight)
980
640 //screen size
360
How I expected the viewport size is changed without the meta tag, because the page is mapped on the default viewport (1540x980) and later will be shrunk in the physical pixel (640x360 less or more).
Ok, but I don't understand why the browser window viewport (innerHeight\innerWidth) still has the same dimensions of viewport (clientWidth|clientHeight). I would have expected that browser windows viewport to remain 560x640.
Can someone give me an explication about this?
I tested this on Google Chroome.
The CSSOM View spec defines both window.innerHeight/Width and document.documentElement.clientHeight/Width in terms of the same viewport, just differing in whether the scrollbars are included or not, so they should always change together.
Which notional viewport gets used is not defined there though. Because it is formally defined by a standard, I think we can take it that it uses the actual viewport as described in the CSS Device Adaptation spec.
I have website 1000x820
It's not a real website, don't ask me about responsive web design.
viewport:
<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">
Then on Iphone SE with iOS 10.
Add to Home Screen.
Launch the application with 1000px width and it view very good with both orientation and we can change it. Of course we can't zoom.
Focus an input and type text. While nothing zoom. Unfocus the input or change an orientation and our scale will be broken. We can't change it.
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">' );
It didn't help me.
Perversion with fonts too.
I've one bad idea. Trace changes of viewport and refresh the page.
You're meta tag includes user-scalable=no and an explicit width.
Remove the user-scalable and update width to width=device-width. You can use initial-scale=1.0 to set a zoom level for devices.
MDN - Using the viewport meta tag to control layout on mobile browsers
I have an issue with fixed position in my website when tilting an iPhone or an iPad. I have read a lot of threads about fixed positioning in IOS but even if it has been a big subject some time ago, it seems that now Safari for IOS is supporting the CSS "position: fixed" (at least partially according to http://caniuse.com/#search=fixed). Indeed it works most of the time but I have one remaining issue when I tilt my device.
I have in my body:
<header>Title</header>
<main>Content</main>
and :
header {
position: fixed;
left: 0;
top: 0;
z-index: 10;
height: 50px;
padding: 0px 10px;
width: inherit;
}
When I look at my website with the landscape orientation, scroll a bit and then come back to portrait, the fixed positioned element (my header) ended up in the middle of the page keeping its landscape size. I just have to scroll a bit manually or just touch the screen and everything is in place again.
How can I avoid this display error just after tilting? I would rather avoid any aditional libraries such as iScroll now that fixed positioning is supposed to be supported. I have also try to scroll with jquery when the screen is resized but it is not working completely.
$(window).resize(function(event) {
var currentPosition = $(window).scrollTop();
$(window).scrollTop(currentPosition+1);
});
With this solution on an IOS5 device, the fixed header stay correctly on the top but when transitioning from landscape to portrait, it keeps its landscape size (a manual scroll with a touch on the screen makes the header get its correct size).
Thanks for your help.
I have done some experiment and I have solved my issue playing with meta viewport tag. My head tag was containing:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
I tried:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
Now I do not have the wrong tilt behaviour anymore and the zoom is still disabled. It seems to work on android too and for top and bottom fixed position.
on my mobile view of my webpage i can scroll in vertical and horizontal direction, but this starts always at the top left corner.
Now i want to set the viewport to my custom position with window.scrollTo or something equivalent. window.scroll seem just to work for desktop browser.
any idea how i could solve that?
I got it finally working.
i had to use additionally the setTimeout function
setTimeout(window.scrollTo(x,y),100);
As I said in my comment, this works if your content is large enough. This means larger than the viewport. Without knowing specifics, did you look into setting the viewport meta tag?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now, if your content div or image or whatever exceeds the size of the viewport width (320 dips on iPhone) you can scroll on the x axis. The same is true for the y axis with different values though.
is possible to set the position of browser's window always on top left on the ipad Screen?! Because when i rotate my ipad if width of my website is more than ipad screen the window is position on top right.
thx
You can set the size of your window for ipads like that in your HTML code.
<meta name="viewport" content="width=device-width, initial-scale=1.0">