# Viewport

Examples of changing the size of your application's viewport in Cypress, for a full reference of commands, go to docs.cypress.io

#### cy.viewport()

To set the viewport size and dimension, use the `cy.viewport()` command.

    cy
      .get('#navbar').should('be.visible')

    cy.viewport(320, 480)

    // the navbar should have collapse since our screen is smaller
    cy
      .get('#navbar').should('not.be.visible')
      .get('.navbar-toggle').should('be.visible').click()
      .get('.nav').find('a').should('be.visible')

    // lets see what our app looks like on a super large screen
    cy.viewport(2999, 2999)

    // We added a cy.wait() between each viewport change so you can see
    // the change otherwise it's a little too fast to see :)
    cy
      .viewport('macbook-15')
      .wait(200)
      .viewport('macbook-13')
      .wait(200)
      .viewport('macbook-11')
      .wait(200)
      .viewport('ipad-2')
      .wait(200)
      .viewport('ipad-mini')
      .wait(200)
      .viewport('iphone-6+')
      .wait(200)
      .viewport('iphone-6')
      .wait(200)
      .viewport('iphone-5')
      .wait(200)
      .viewport('iphone-4')
      .wait(200)
      .viewport('iphone-3')
      .wait(200)

    cy
      .viewport('ipad-2', 'portrait')
      .wait(200)
      .viewport('iphone-4', 'landscape')
      .wait(200)