Mobile Web pages or apps look zoomed-out with extended preview

  • Advertisement ( why? )
     

    vonsita, 26th Jun 2012 7:37 pm

    Hi everyone, last week began testing some new HTML,CSS, JS frameworks for mobile devices wanting to take adventage of HTML-Kit Tools extended preview.

    Thing is the apps look zoomed-out. The general suggestion is about including the viewport meta tag, but nothing seems to work.

    Time ago designed a website that uses media-queries to render a mobile version of the website. Experimenting a little with this website, ran a test in extended preview and altough the mobile css kicks-in the page also looks zoomed-out.

    Began testing in an iPod Touch and in Opera Mobile Emulator but result is the same. The apps look like if you view a regular website (not mobile-optimized).

    Does any one knows what's going on?

    Thank you, your help will be appreciated.

    • HTML-Kit Support, 26th Jun 2012 8:53 pm

      On 6/26/2012 7:37 PM, vonsita wrote:

      Hi everyone, last week began testing some new HTML,CSS, JS frameworks
      for mobile devices wanting to take adventage of HTML-Kit Tools
      extended preview.

      Thing is the apps look zoomed-out. The general suggestion is about
      including the viewport meta tag, but nothing seems to work.

      Time ago designed a website that uses media-queries to render a
      mobile version of the website. Experimenting a little with this
      website, ran a test in extended preview and altough the mobile css
      kicks-in the page also looks zoomed-out.

      Began testing in an iPod Touch and in Opera Mobile Emulator but
      result is the same. The apps look like if you view a regular website
      (not mobile-optimized).

      Does any one knows what's going on?

      Thank you, your help will be appreciated.

      Hi,

      I had to play with this a little bit but try this first... add the
      following link to one of the pages you're testing, preview in a mobile
      device through Extended Preview, and then click the link.

      <a href="#" target="_blank"
      onclick="window.open(window.location, 'test');return false;">Test</a>
      

      Does the page come out in device width? Let me know if this doesn't help.

      Chami

      • vonsita, 26th Jun 2012 11:33 pm

        Thanks for the response Chami and here are the results:

        Well I know how it's like going through a troubleshooting process so I'm going to describe how all this went in order for you to figure out better what's happening:

        1.Included the link provided

        2.hit preview

        3.At first the view appeared just as before, small. Hit the link and the viewport or screen grew out of proportions. It went in the exactly opposite way. It's zoomed-in now.

        4.When the new link was pressed (which included as a new button in the existing nav-bar) it took me nowhere even if the href is pointing to another page, but...if navigate for the rest of the website using the other buttons the pages are correctly sized, just as the version that's running in the server right now.

        5.when returning to home-page (the one that includes the link) everything goes crazy again.

        6.Test conducted on an iPod Touch and in a HTC Desire (Opera Emulator) behaving in the exact same way.

        Thank you Chami and I'm sorry for coming always with all sort of strange situations.

        Alfredo.

        • HTML-Kit Support, 27th Jun 2012 12:59 am

          On 6/26/2012 11:33 PM, vonsita wrote:

          Thanks for the response Chami and here are the results:

          Well I know how it's like going through a troubleshooting process so
          I'm going to describe how all this went in order for you to figure
          out better what's happening:

          1.Included the link provided

          2.hit preview

          3.At first the view appeared just as before, small. Hit the link and
          the viewport or screen grew out of proportions. It went in the
          exactly opposite way. It's zoomed-in now.

          4.When the new link was pressed (which included as a new button in
          the existing nav-bar) it took me nowhere even if the href is pointing
          to another page, but...if navigate for the rest of the website using
          the other buttons the pages are correctly sized, just as the version
          that's running in the server right now.

          5.when returning to home-page (the one that includes the link)
          everything goes crazy again.

          6.Test conducted on an iPod Touch and in a HTC Desire (Opera
          Emulator) behaving in the exact same way.

          Thank you Chami and I'm sorry for coming always with all sort of
          strange situations.

          Alfredo.

          Thank you, Alfredo. It's no problem at all. I want to know about these
          happenings :)

          Hmm... if the test link works at all and if the view port meta is
          specified, it seems to me, the rest should be handled by the device. If
          things look as intended when you preview through a regular server but
          not when going through extended preview, if you could please post here
          or email me the URL to your test site I can try to reproduce it here to
          get a better idea.

          Chami

          • vonsita, 27th Jun 2012 4:56 pm

            Sure Chami, you can find the test page at www.istudio.com.mx/mobil/

            • HTML-Kit Support, 28th Jun 2012 2:08 pm

              Hi Alfredo,

              On 6/27/2012 4:56 PM, vonsita wrote:

              Sure Chami, you can find the test page at www.istudio.com.mx/mobil/

              Is this what you expect to see in a mobile device connected to Extended
              Preview?

              http://www.htmlkit.com/view/#!/i/hkt-test-mobile-preview-1

              If yes, you can get this in TreeHouse test build in your User Assistant
              account right now :)

              Hope this helps. Please let me know if there are any other issues.

              Chami

              • vonsita, 28th Jun 2012 4:49 pm

                Ooooh myyy God yeess! Now we're talking haha! Well hammm so now replace my Tools with this version?

                This is very good news 'cause yesterday a lady call me about a web application (a fluid one to be viewable on smartphones and tablets) she needs and I was counting on Tools! Thank you very much!

                And...sometime in the morning saw a post about Tools supporting LESS CSS in a future release? Is that true?

                Well let me test extended preview and now that's working I would like to post an article in my blog and in your Facebook's wall about using HTML-Kit as a mobile development tools using Sencha and some other frameworks. It's ok for you? If so, do you have an email account so I can send you a preview of the article?

                Thank you very much again Chami, God bless you!

                Alfredo.

                • HTML-Kit Support, 28th Jun 2012 5:35 pm

                  Hey Alfredo,

                  On 6/28/2012 4:49 PM, vonsita wrote:

                  Ooooh myyy God yeess! Now we're talking haha! Well hammm so now
                  replace my Tools with this version?

                  Yes. Please note that TreeHouse builds are test versions so you'll see
                  incomplete user interface elements (like the new status bar in this
                  particular build) and so on. To be extra careful you can make a backup
                  of your projects, templates, etc., by going to "Kit > Backup" menu option.

                  This is very good news 'cause yesterday a lady call me about a web
                  application (a fluid one to be viewable on smartphones and tablets)
                  she needs and I was counting on Tools! Thank you very much!

                  No problem at all! I hope this will help speed up website testing for you.

                  And...sometime in the morning saw a post about Tools supporting LESS
                  CSS in a future release? Is that true?

                  Yes :) And I'm pleasantly surprised by all the good feedback about it.

                  Well let me test extended preview and now that's working I would like
                  to post an article in my blog and in your Facebook's wall about using
                  HTML-Kit as a mobile development tools using Sencha and some other
                  frameworks. It's ok for you? If so, do you have an email account so I
                  can send you a preview of the article?

                  That would be great! I'd like that. For my email and other contact info
                  please see htmlkit.com/contact/

                  Thank you very much again Chami, God bless you!

                  Alfredo.

                  Thank you, Alfredo. Let me know how it goes.

                  Chami

                  • vonsita, 28th Jun 2012 7:27 pm

                    Excellent!! I'l be in touch shortly...ooooor what about if install in parallel? Can a second instance of HTML-Kit Tools be installed?
                    and wait for the next build?

                    • HTML-Kit Support, 28th Jun 2012 7:37 pm

                      On 6/28/2012 7:27 PM, vonsita wrote:

                      Excellent!! I'l be in touch shortly...ooooor what about if install in
                      parallel? Can a second instance of HTML-Kit Tools be installed? and
                      wait for the next build?

                      Sure, installing in a virtual machine should work just as well.

                      You can install multiple instances of Tools on the same computer, even
                      without VMs, but in general it's best to stay with a single installation
                      so that things like file and browser associations don't get confused by
                      multiple targets.

                      Chami

                      • vonsita, 28th Jun 2012 8:22 pm

                        Mmmm....uninstalled and installed test build instead aaaand guessss what?

                        Works!! haha!! no problem can live without UI interfaces but not without preview-on-devices. LungoJS works, Sencha Touch 2 works. I think this one is going to be a hit 'cause no more XAMPP servers (or any other for that matter!)

                        Well I'm going to write the article in the weekend and let you know on monday ok?

                        • HTML-Kit Support, 28th Jun 2012 8:40 pm

                          On 6/28/2012 8:22 PM, vonsita wrote:

                          Mmmm....uninstalled and installed test build instead aaaand guessss
                          what?

                          Works!! haha!! no problem can live without UI interfaces but not
                          without preview-on-devices. LungoJS works, Sencha Touch 2 works. I
                          think this one is going to be a hit 'cause no more XAMPP servers (or
                          any other for that matter!)

                          Woohoo!! Although I've tested Extended Preview on my end, it's a feature
                          that needs to see real world cases like yours. So I'm very glad to hear
                          that it worked for you. I know you've had fun configuring firewalls and
                          dealing with differences in mobile browsers :)

                          Well I'm going to write the article in the weekend and let you know
                          on monday ok?

                          Sounds good. Thank you Alfredo!

                          By the way, when installing Tools builds it's not strictly necessary to
                          uninstall the previous version.

                          Chami