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.
2,618
questions
0
votes
1answer
18 views
Setting puppeteer viewport to null doesn't change viewport
I am using puppeteer and I am setting the defaultViewPort param to null, however it doesn't change the actual viewport when chromium (or chrome, as I have changed it to be) is launched
const ...
0
votes
1answer
28 views
Understand SVG viewport
I'm trying to understand the SVG viewport. Why are these three examples so different?
svg {
border: 2px solid red;
}
<div>
<svg>
<rect x="0" y="0" width="100" height="100" ...
-1
votes
0answers
13 views
Lighthouse: Content is not sized correctly for the viewport
More details on what is the desired result (because of a close vote): I want it to show that that check passes, although I do not know how to. I have researched, but no solutions worked. I am asking ...
0
votes
1answer
17 views
Any bulletproof way to check if a user can actually see a div element?
Searching on the web, I only come across solutions that take into account the viewport and/or the first parent container which is scrollable. But, is there a bulletproof way to check if a div is ...
1
vote
0answers
36 views
Toggling class on scroll when div enters viewport with CSS scroll-snap
I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: ...
0
votes
0answers
42 views
Image wider than flex-viewport after making thumbnails vertical
I've a problem with image size in Woocommerce and FlexSlider product gallery.
I'm using a free Astra theme. I've found the code that makes the thumbnail vertical on the left side of product image.
....
-3
votes
0answers
26 views
User Story #10: The height of the welcome section should be equal to the height of the viewport
I am finishing up a project for FCC and this is one of the user stories. I know this would require a media query, I just have no idea what to do next. How do i accomplish this?
0
votes
0answers
21 views
document.documentElement.clientWidth vs window.innerWidth performance
I have a performance problem with window.innerWidth on mobile and with document.documentElement.clientWidth on desktop.
Is not a problem of dimension but a problem of timing. The return of window....
0
votes
0answers
8 views
Is there a way to detect when an element leaves the viewport in Google Tag Manger?
I want to create a tag that can measure how long a certain element stays in the viewport and I understand how to create a tag that fires when the element enters the viewport, but I'm not sure how to ...
0
votes
0answers
46 views
Start typewriter effect when element is in the viewport
I need to start a typewriter effect of a text element when it's visible in the viewport. I tried with getBoundClientRect but I think that I'm missing something. It starts always when the document is ...
0
votes
3answers
67 views
Responsive Background Image (animated fade loop) that will span full height of page content?
ITERATION 1 :
I've got a quite pleasant animation going on in the background. It is responsive, filling the viewport on the fly (you can resize the window and it adjusts). However, if the content on ...
0
votes
0answers
7 views
Mediaqueries: responsive images not working with safari (apple)
I am trying to create a responsive website, and so i am using the meta tag viewport and I created a few mediaqueries. I have got a section with a background image and for each breakpoint I change the ...
0
votes
1answer
30 views
React trigger effect on scroll position
I have to implement some custom animation on some component after it gets into the viewport, in desktop mode it should be triggered on
window.scrollY > 1200
it works on desktop but not on mobile ...
1
vote
1answer
19 views
HTML CSS How can I add viewport info to Cascading Style Sheet?
I have a program that generates HTML listings that uses Cascading Style Sheet templates (that are added to the HTML file upon generation) but I would like to add the following line in the CSS template:...
0
votes
0answers
14 views
why does viewport 700px not fit 700px website on mobile?
I am developing a website (mostly) without responsive adaptations. I made it so that it looks the same on PC as on smartphone (smartphone-first approach). No frameworks or anything, just nice clean ...
0
votes
0answers
6 views
Responsive design takes up whole desktop screen
I am successfully converting a desktop website to be also mobile-responsive using Bootstrap 4. The page used to take up only a narrow -say 70% of total width- column with two empty columns on either ...
0
votes
0answers
24 views
GoogleChrome phone emulator
Google chrome developer-tools emulator says that iphone6/7/8 has csswidth=375px and it works well when i tested it with media-query. but What i understand that this means that the hardware pixels ...
-1
votes
0answers
50 views
Multiline truncated text with “show more” button which truncates to fit browser viewport: how to implement?
I hope this question finds you well.
See the subject line.
I would prefer to do this using vanilla JavaScript/CSS/HTML (i.e. without libraries, frameworks, etc.) but I can be flexible.
I seek to ...
0
votes
0answers
18 views
My github website does not show up only on iOS device
I am currently uploading my website on github. and I checked it for mobile version. I found it does not show up on iOS device but Samsung phones. so I searched for some information about this.
I think ...
2
votes
1answer
24 views
Cypress viewport doesn't accurately reflect the device that's specified
While attempting to test scripts using either cy.viewport('iphone-x') or cy.viewport(375,812), both render the site the same (incorrectly) but differently than if I open Chrome, go to devtools and ...
1
vote
1answer
36 views
Ionic capacitor WKWebView inconsitent viewport height
I'm having issue with my app viewport being inconsistent after closing/reopening it on iPhone 10+.
At first the viewport starts where it should (top of the screen with window.innerHeight = 862px) but ...
-1
votes
2answers
40 views
Creating a sticky sidebar with javascript or jquery
I am new to front end web development, so please forgive me if this is a novice question
I would like to create a sticky sidebar that appears when the parent div is inside the viewport, and disappears ...
2
votes
0answers
50 views
tmap: incorporate inset map with tmap_arrange
How to create and save inset maps with tmap is covered in several tutorials, e.g. here. However, I would like to merge several maps into one file, as facilitated by tmap_arrange. To my understanding, ...
0
votes
2answers
30 views
How to make flexbox resize dependant on content size
I am building a webapp where I have different sticky elements in a flexbox that is scrollable.
In the middle container of the flexbox you can scroll through content that is contained in a new div ...
0
votes
0answers
23 views
run a function for each class element when gets into view javascript
I'm trying to build a portfolio site when the main page is a scroll of all the projects.
I gave all the titles of the projects a fixed position with display 'none' and I want to change it to display '...
0
votes
0answers
35 views
plot second graph on grid.layout(1,2) covers entire screen
I have two viewports set up with grid.layout with the intent to show them in two columns one row. First viewport is for a table and second viewport for a plot. Second plot, should appear on viewport ...
0
votes
0answers
18 views
Why does my window reset after everytime I call SDL_RenderPresent()?
I was trying to implement viewport. The thing I was doing is that I render in one viewport, than I call SDL_RenderPresent to update screen and then again I implemented viewport. The whole process was ...
1
vote
2answers
36 views
How can I decrease the viewport size of my app to 67% of chrome browser view?
I have an Angular application that has recently been bought with 100s of scss files. When the application is rendered in the browser which is set to 100% it looks ugly and zoomed in too much.
If I use ...
1
vote
0answers
15 views
isInViewport inside scroll funtion triggers my pages content only after scrolling the first bit. Is there any way to avoid this?
For this assignment, the particular content needs to be in the scroll function because there's certain interactions for each scene. However, the content doesn't appear before scrolling which makes ...
0
votes
1answer
37 views
Auto-resizing web page to fit full height on mobile?
I've been trying to get my web page automatically resized to fit the height on a mobile.
The left side of the screenshot shows the version with no scale while on the right side I used the "...
0
votes
1answer
19 views
How to render points on a 2D horizontal (Oxy) plane into points on a 2D vertical (phone) plane?
I'm trying to convert (longitude/latitude) locations to rectangles on a phone screen. But for now let's pretend they're normal points on Oxy plane.
Assume the camera is standing at point (X,Y), ...
0
votes
0answers
17 views
How can I make my background image take up the entire browser/screen window size, not the inaccurate pixel sizes on the dev tools
I am trying to get a background image with some text to show up on every browser window without it cutting off. The pixel dimensions on the dev tools are wrong and don't include HUD and other ...
0
votes
0answers
46 views
How can we get pixi-viewport to follow a pixi-react component?
Working on a game, I have a map and a viewport following a character, which moves on the map.
I made a working prototype here: https://codesandbox.io/s/condescending-wave-lkkgs?file=/src/index.js (...
0
votes
3answers
66 views
HTML + CSS - fit 2 divs within 100vh
I'm having an issue with my code and it seems easy but I can't get my head around it.
I'm trying to make the main div full vh so the content auto height should be 100vh - the height of the title box.
...
0
votes
2answers
44 views
rectangle 720px is only half visible on phone 720 x 1280
my phone is Huawei cun-L01
specifications says - display: 720 x 1280 px
on a page I have a rectangle - 720 px width
it is not entire visible
in fact - only 360 px width is visible entirely (half of ...
0
votes
1answer
13 views
Drupal: detect elements in viewport + statistics
Motivation: detect elements (view's divs) in viewport on scroll + ignore iterations + collect to DB + show statistics. Is there any solutions? Or just give me directions. I'll be very grateful. No ...
0
votes
0answers
32 views
ThreeJS world unit to pixel conversion
Is there a way compute the ratio between world unit and pixels in ThreeJS ? I need to determine how many units apart my objects need to be in order to be rendered 1 pixel apart on the screen.
The ...
1
vote
1answer
29 views
How to automatically set focus on a <input> field when it arrives in the viewport after scrolling?
I know the autofocus attribute:
<input type="email" id="hello" placeholder="a@b.com" autofocus>
to automatically set the focus on a HTML input.
But when the page ...
0
votes
1answer
25 views
Looping images when in viewport mobile javascript
The problem
I'm trying to create a product card which loop throught images on mouse hover (for desktop) and when the div outside the image is completely inside the viewport on mobile. Also when the ...
1
vote
1answer
56 views
What's the difference between VisualViewport.offsetTop and VisualViewport.pageTop?
Spec's here, https://wicg.github.io/visual-viewport/, but I can't understand the difference.
Aren't the "initial containing block origin" coordinates always the same as the layout viewport ...
0
votes
0answers
27 views
FabricJS: Set vptCoords depending on the window size
I am building an application with fabricjs.
I would like to add a navigation mod that allows you to move around the canvas (size 5000x5000).
To verify that the user does not scroll outside the size of ...
0
votes
1answer
41 views
Background image appears zoomed in on mobile screens
I'm building a project for school, and I'm having issues with the background image. I've used this code snippet to do it (https://css-tricks.com/perfect-full-page-background-image/), and it works fine ...
1
vote
0answers
38 views
Viewport meta tag required when using vh/vw CSS units?
I have designed a responsive website which uses vh and vw scales rather than pixel sizes throughout the CSS, including font-size properties. I know the site views perfectly fine on mobile/tablet ...
1
vote
0answers
31 views
Force zoom out mobile browser/page, if “Desktop site” checked
If "Desktop site" not checked, this code working fine:
$('#formUploader').on('change', function(e) {
e.preventDefault();
var viewport = document.querySelector('meta[name="...
1
vote
1answer
34 views
Since viewport changes have now been disabled, how can I force a viewport 'unzoom' with javascript?
I've implemented a scheme allowing visitors on my website to tap small photos to see a larger view. The tap/click causes a new page element to appear and expand to the max dimensions available for the ...
0
votes
1answer
41 views
Rendering a viewport to a sprite's texture only gets one quarter of the rendered image. In Godot
In the right side I have the Viewport object that renders the OriginalImage.
Then in the left side I have a Sprite whose texture is the output of the Viewport object.
When running the Scene, I only ...
1
vote
0answers
80 views
Vue JS: how to async load and render components when they are visible in the viewport
I am relatively new to Vue JS, and I am working on a website that publishes articles that contain different types of content (videos, images) and polls (multiple poll forms on the same page). The site ...
0
votes
0answers
29 views
How can I interpolate between two Transform3Ds in WPF
I have a Viewport3D that contains a Room with two big boxes. Each has a small box inside it:
<Viewport3D>
<ModelVisual3D x:Name="Room">
<ModelVisual3D x:...
0
votes
0answers
42 views
How can I turn Swiper on/off based on viewport width (React)?
I want the block to have a slider on small viewports, but not on large viewports (992+).
I made an example of how I am using Swiper in React: https://codesandbox.io/s/reverent-forest-j0ss7?file=/src/...
0
votes
0answers
14 views
disable persisting zoom on website via user-scalable tag
I have implemented a website which is used on mobile most of the times. Since zooming was an issue for my purpose, I have implemented a user-scalable tag into my viewport attribute:
{ name: 'viewport',...