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">
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've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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.
I want to fit my page on the screen, whatever resolution is there and not allowing scaling.
I have seen in alot of documents/resource that this is the best way of using viewport to adjust the whole page on the screen. (even jquerymobile generate this viewport)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
but It only show some portion of the page.
But this code works as excpected. The whole page is fit on the screen
<meta name="viewport" content="user-scalable=0;" />
Whats the difference?
This meta tag requires that your document width is device width. jQuery Mobile uses it because jQuery Mobile make sure that it will adjust document width according to device width. If you want to put a 980px wide page in a 320px wide screen, then you have to set 980px in the meta tag:
<meta name="viewport" content="width=980, user-scalable=no">
If you don't know your document width, you have to get it first and then set the meta tag property.