Stack Overflow
Stack Overflow

Questions tagged [viewport]

A viewport is a rectangular viewing region in computer graphics, or a term used for optical components. It has several definitions in different contexts.A viewport is a region of the screen used to display a portion of the total image to be shown. Also it can be a group of regions that together make one layout.

2654 questions
888
votes
15 answers

How to get the browser viewport dimensions?

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size? Or better yet, the viewport size of the browser with JavaScript? See green area here:
Alix Axel
  • 141,486
  • 84
  • 375
  • 483
433
votes
17 answers

How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail:
CloudMeta
  • 39,869
  • 66
  • 178
  • 289
324
votes
10 answers

How to increase the vertical split window size in Vim

:vsplit (short form: :vs) split the Vim viewport vertically. :30vs splits the viewport, making the new window 30 characters wide. Once this 30 char window is created, how would one change it's size to 31 or 29? With horizontal windows Ctrl-W +…
molicule
  • 5,171
  • 3
  • 26
  • 38
311
votes
7 answers

Using jQuery To Get Size of Viewport

How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page is resized? I need to make an IFRAME size into this space (coming in a little on each margin). For those who don't know, the browser viewport is not…
Volomike
  • 21,378
  • 19
  • 99
  • 188
215
votes
14 answers

Get viewport/window height in ReactJS

How do I get the viewport height in ReactJS? In normal JavaScript I use window.innerHeight() but using ReactJS, I'm not sure how to get this information. My understanding is that ReactDOM.findDomNode() only works for components created. However…
Jabran Saeed
  • 4,026
  • 2
  • 19
  • 34
212
votes
31 answers

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

I am building a website specifically for mobile devices. There is one page in particular which is best viewed in landscape mode. Is there a way to detect if the user visiting that page is viewing it in Portrait mode and if so, display a message…
Dan
  • 9,511
  • 7
  • 36
  • 31
178
votes
18 answers

disable viewport zooming iOS 10+ safari?

I've update my iPhone 6 plus to iOS 10 beta version and just found that in mobile safari, you can zoom any webpages by double tapping or pinching IGNORE the user-scalable=no code in the meta tag. I don't know whether it's a bug or feature. If it's…
Sam Su
  • 4,585
  • 6
  • 31
  • 74
163
votes
7 answers

HTML5 Canvas 100% Width Height of Viewport?

I am trying to create a canvas element that takes up 100% of the width and height of the viewport. You can see in my example here that is occurring, however it is adding scroll bars in both Chrome and FireFox. How can I prevent the extra scroll…
aherrick
  • 18,488
  • 29
  • 100
  • 168
161
votes
2 answers

What does the shrink-to-fit viewport meta attribute do?

I'm having trouble finding documentation for this. Is it Safari specific? There was a recent bug in iOS 9 (here), the solution to which is adding shrink-to-fit=no to the viewport meta. What does this code do?
755
  • 2,574
  • 3
  • 17
  • 28
157
votes
16 answers

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

I have a website here. Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden. In any mobile browser, whether Android or iOS, the black menu bar displays its full width,…
Indigenuity
  • 7,999
  • 6
  • 34
  • 65
118
votes
6 answers

Using jquery to get element's position relative to viewport

What's the proper way to get the position of an element on the page relative to the viewport (rather than the document). jQuery.offset function seemed promising: Get the current coordinates of the first element, or set the coordinates of every…
DA.
  • 36,871
  • 47
  • 133
  • 201
105
votes
4 answers

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in…
Manca Weeks
  • 1,133
  • 3
  • 11
  • 11
99
votes
4 answers

What's the point of 'meta viewport user-scalable=no' in the Google Maps API

I'm using the Google Maps JavaScript API V3 and the official examples always have you include this meta tag: Most of the 3rd-party examples I've seen also do it. I wrote a…
Ian Dunn
  • 3,146
  • 5
  • 24
  • 39
99
votes
3 answers

Can I change the viewport meta tag in mobile safari on the fly?

I have an AJAX app built for mobile Safari browser that needs to display different types of content. For some content, I need user-scalable=1 and for other ones, I need user-scalable=0. Is there a way to modify the value of the content attribute…
Pepper
  • 2,714
  • 3
  • 22
  • 26
82
votes
6 answers

What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

I was going through the source code of a website and found this piece of code. I want to know what this initial scale,…
user3483724
1
2 3
…
99 100