ICEmobile
  1. ICEmobile
  2. MOBI-406

Client Viewport Simulator for Desktop

    Details

    • Type: New Feature New Feature
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.1 Final
    • Fix Version/s: 1.3 Beta
    • Component/s: Faces, Spring
    • Labels:
      None
    • Environment:
      n/a

      Description

      A really useful feature for testing and the demos would be a client viewport simulator. On a desktop view, for demo purposes, we could allow the user to view in a range of supported devices, and render a mockup of that device and the screen dimensions on the screen in both portrait and landscape modes.For the device chrome we could stock images of the devices, and for the viewports we use an iframe pointing to the demo.

        Activity

        Hide
        Philip Breau added a comment - - edited

        This may work better on some browsers than others, and we might simply target certain workable desktop browsers, like Chrome, and specify that others are not supported.

        One issue would be removing the scroll bars. On webkit this is simple:

        #element::-webkit-scrollbar

        { width: 0 !important }

        To simulate touch scrolling, we might just use external buttons outside the mock device screen allowing the users to scroll up or down.

        was:A really useful feature for testing and the demos would be a client viewport simulator. On a desktop view, for demo purposes, we could allow the user to view in a range of supported devices, and render a mockup of that device and the screen dimensions on the screen in both portrait and landscape modes.For the device chrome we could stock images of the devices, and for the viewports we use an iframe pointing to the demo.

        Show
        Philip Breau added a comment - - edited This may work better on some browsers than others, and we might simply target certain workable desktop browsers, like Chrome, and specify that others are not supported. One issue would be removing the scroll bars. On webkit this is simple: #element::-webkit-scrollbar { width: 0 !important } To simulate touch scrolling, we might just use external buttons outside the mock device screen allowing the users to scroll up or down. was:A really useful feature for testing and the demos would be a client viewport simulator. On a desktop view, for demo purposes, we could allow the user to view in a range of supported devices, and render a mockup of that device and the screen dimensions on the screen in both portrait and landscape modes.For the device chrome we could stock images of the devices, and for the viewports we use an iframe pointing to the demo.
        Hide
        Philip Breau added a comment -

        Waiting on new image assets from Rob

        Show
        Philip Breau added a comment - Waiting on new image assets from Rob
        Hide
        Philip Breau added a comment -

        BB Q10, Z10, Nexus 4, 7, iPhone and iPad have been added

        Show
        Philip Breau added a comment - BB Q10, Z10, Nexus 4, 7, iPhone and iPad have been added

          People

          • Assignee:
            Philip Breau
            Reporter:
            Philip Breau
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: