Answers.Body: <p>Once you're in the responsive design view, the handles on the right side and bottom right corner of the view let you drag to set a display size. The drop-down menu in the upper left corner shows the dimensions as you drag. Once it's at the size you want, you can click on the menu, select Add Preset at the end of the list, and save those dimensions with a name.</p>
  
  <p>Here's a question that lists some resources for viewport dimensions: <a href="https://stackoverflow.com/questions/5784485/how-to-figure-out-common-viewport-dimensions-not-screen-sizes-of-common-device">https://stackoverflow.com/questions/5784485/how-to-figure-out-common-viewport-dimensions-not-screen-sizes-of-common-device</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-02-24T18:37:55.557Z
Answers.Text: Wow, I must have tried it but didn't see the Add Preset button. By the way, on that URL you gave, here's an incredibly useful list of presets http://viewportsizes.com/
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-02-24T15:49:17.220Z
Answers.LastActivityDate: 2014-02-24T15:49:17.220Z
Answers.LastEditDate: 2017-05-23T12:37:39.963Z
Answers.UserDisplayName: thinkulum
Body: <p>I'm coding html for ebooks, and my first test is in the Firefox browser.  I need a down-and-dirty to simulate and compare web design in different device viewports in both landscape and portrait mode. </p>
  
  <p>When  I use the <strong>web developer</strong> --> <strong>responsive design view</strong> in Firefox, I have some presets, and if I click the rotate button I can see both landscape and portrait mode. But I don't see any capability to add custom viewport dimensions... which is strange given all the devices which are coming out these days. </p>
  
  <p>Is there a way to do this? Also, is there a good URL which lists all the most popular viewport sizes for devices? </p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-02-24T09:01:21.897Z
Comments.Text: Are you testing the viewport for the browser capabilities of those ebooks, or for the rendering of HTML within EPUB/AZW3?
Comments.UserDisplayName: Anthon
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-02-24T12:50:03.577Z
Comments.Text: I eventually test everything against the device (or at least a device emulator -- such as  Kindle previewer). But initially I test things in a browser, and it's a pain not to be able to change the viewport to a certain width and height.
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-02-24T13:08:31.763Z
Comments.Text: One of the primary things I test for is for image rendering and spacing. The browser can tell you initially whether you are way off or close, and KF8 is not as quirky as earlier mobis.
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-02-24T13:22:19.057Z
Comments.Text: I was unclear (using ebooks instead of ebook readers in my comment). So you are testing ebooks on ebookreaders, not browsers on the same ebook readers. Correct?
Comments.UserDisplayName: Anthon
Tags: <epub><creation>
Title: browser tools to test custom viewport sizes?
UserDisplayName: idiotprogrammer
ThreadText: # browser tools to test custom viewport sizes?
  
  (Asked by: username_0 on 2014-02-24)
  
  I'm coding html for ebooks, and my first test is in the Firefox browser. I need a down-and-dirty to simulate and compare web design in different device viewports in both landscape and portrait mode.
  
  When I use the **web developer** --> **responsive design view** in Firefox, I have some presets, and if I click the rotate button I can see both landscape and portrait mode. But I don't see any capability to add custom viewport dimensions... which is strange given all the devices which are coming out these days.
  
  Is there a way to do this? Also, is there a good URL which lists all the most popular viewport sizes for devices?
  
  **Tags:** epub, creation
  
  > **Comments:**
  > **username_1**: Are you testing the viewport for the browser capabilities of those ebooks, or for the rendering of HTML within EPUB/AZW3?  
  > **username_0**: I eventually test everything against the device (or at least a device emulator -- such as  Kindle previewer). But initially I test things in a browser, and it's a pain not to be able to change the viewport to a certain width and height.  
  > **username_0**: One of the primary things I test for is for image rendering and spacing. The browser can tell you initially whether you are way off or close, and KF8 is not as quirky as earlier mobis.  
  > **username_1**: I was unclear (using ebooks instead of ebook readers in my comment). So you are testing ebooks on ebookreaders, not browsers on the same ebook readers. Correct?  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2014-02-24. Score: 3 | Accepted answer
  
  Once you're in the responsive design view, the handles on the right side and bottom right corner of the view let you drag to set a display size. The drop-down menu in the upper left corner shows the dimensions as you drag. Once it's at the size you want, you can click on the menu, select Add Preset at the end of the list, and save those dimensions with a name.
  
  Here's a question that lists some resources for viewport dimensions: <https://stackoverflow.com/questions/5784485/how-to-figure-out-common-viewport-dimensions-not-screen-sizes-of-common-device>
  
  > **Comments:**
  > **username_0**: Wow, I must have tried it but didn't see the Add Preset button. By the way, on that URL you gave, here's an incredibly useful list of presets http://viewportsizes.com/  
  
  ---
  
  