viewport   2058

« earlier    

GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.
script that allows class toggle when object enters viewport, to trigger transitions or animations. Simplest most basic would be fade in on entering window but allows for more sophisticated use that I wouldn't be able to do until I learn more js.
webdesign  web  design  js  javascript  script  scroll  window  trigger  position  viewport  visible  toggle  library  animation  animate 
7 days ago by piperh
Some Things You Oughta Know When Working with Viewport Units
You'd expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven't scrolled) since it's along the bottom edge of a 100vh element. But it's actually hidden behind the browser chrome in mobile browsers, including iOS Safari or Android Chrome.
fridayfrontend  css  cssbasics  vh  viewport 
27 days ago by spaceninja
Some Things You Oughta Know When Working with Viewport Units | CSS-Tricks
about the 100vh problem on mobiles (it's calculated without including address bar height)
webdesign  web  design  vw  vh  viewport  width  height  css  100  100%  chrome  mobile  android 
28 days ago by piperh
Avoid 100vh On Mobile Web |
Explains that 100vh on mobile sets vh to height of window with address panel hidden, so that when address bar is visible then window is smaller but vh won't update itself.
See comments at bottom for workarounds
webdesign  web  design  webdev  mobile  css  100vh  vh  100  height  screen  viewport  js  javascript  script  window  innerheight 
7 weeks ago by piperh
Avoid 100vh On Mobile Web
The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with address the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with.
fridayfrontend  css  cssbasics  layout  viewport  vh  mobile 
7 weeks ago by spaceninja
Screen Size Map
An interactive map of popular screen sizes illustrating the responsive and adaptive device landscape.
design  responsive  display  map  screen  viewport  size  reference  screensize  adaptive 
8 weeks ago by mahnouel
Screen Size Map
An interactive map of popular screen sizes illustrating the responsive and adaptive device landscape.
breakpoint  design  display  size  screensize  screen  responsive  resolution  viewport  reference 
8 weeks ago by archmind

« earlier    

related tags

100%  100  100vh  2019  361  a11y  adaptive  add-site  android  animate  animation  api  app  apple  applewatch  back  backtotop  bleed  breakpoint  browser  browsers  bugs  calculator  centre  ch  cheat  chrome  clevermarks  client  code  codepen  coding  collection  component  controls  cookies  css  cssbasics  databinding  density  design  development  device  devices  display  em  end  event  experience  font-size  font  fontsize  for  free  fridayfrontend  front  frontend  full  fullscreen  github  grid  height  html  ifttt  images  innerheight  instapaper  interface  intersection  inview  ios  javascript  jquery  js  layout  lazy  lazyload  lib  libraries  library  load  mac  map  media  mediaqueries  mobile  modal  monitor  motion  mouse  needsediting  newslettered  npm  observer  os  overiew  paralax  parallax  performance  pixel  position  positioning  poster  puppeteer  querry  react  reactjs  recommendations  reference  regression  relatve  rem  resolution  resources  responsive  rwd  screen-size  screen  screensize  script  scroll  scrolling  search  sensor  sfari  sheet  size  smartphone  software  speed  svg  testing  to  toggle  tool  tools  top  trigger  troubleshooting  type  typography  ui  units  utility  ux  uxer  vh  viewbox  visable  visibility  visible  visual  vmax  vmin  vw  w3schools  watch  watcher  waypoints  web  webdesign  webdev  webwork  weekly.rc  width  window 

Copy this bookmark: