+ Reply
Results 1 to 3 of 3

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: iPhone Web Development Tips and Official Documentation Released

is a discussion within the

3rd Party Apps Requests

forums, a part of the

3rd Party Apps For iPhone | iPod Touch

section;
iPhone Web Development Tips and Official Documentation Released As soon as the iPhone was in developers hands on Friday they were hacking around. This involved doing a "for (var key
...
  1. #1
    iPhoneaholic ReVan's Avatar
    Join Date
    Oct 2007
    Location
    BOOTLOADER
    Posts
    458
    Thanks
    6
    Thanked 526 Times in 109 Posts

    Post iPhone Web Development Tips and Official Documentation Released
    iPhone Web Development Tips and Official Documentation Released

    As soon as the iPhone was in developers hands on Friday they were hacking around. This involved doing a "for (var key in document)" and the like to see what was available.

    In an ideal world, Apple would have released a beautiful set of documentation for the community, but they were probably too busy getting the phone out of the door (maybe can't blame them huh).

    The community has begun to document things:

    Getting rid of the toolbar

    You can scroll down a little, enough to get rid of the toolbar via:
    Code:
    JAVASCRIPT:
    
       1.
           
       2.
          window.onload = function() {
       3.
            setTimeout(function(){window.scrollTo(0, 1);}, 100);
       4.
          }
       5.
    but what about handling the rotation of the phone?

    Updating the Layout when the user rotates

    Joe Hewitt built a liquid layout that watches the the change from portrait to landscape mode.
    Code:
    JAVASCRIPT:
    
       1.
           
       2.
          addEventListener("load", function()
       3.
          {
       4.
              setTimeout(updateLayout, 0);
       5.
          }, false);
       6.
           
       7.
          var currentWidth = 0;
       8.
           
       9.
          function updateLayout()
      10.
          {
      11.
              if (window.innerWidth != currentWidth)
      12.
              {
      13.
                  currentWidth = window.innerWidth;
      14.
           
      15.
                  var orient = currentWidth == 320 ? "profile" : "landscape";
      16.
                  document.body.setAttribute("orient", orient);
      17.
                  setTimeout(function()
      18.
                  {
      19.
                      window.scrollTo(0, 1);
      20.
                  }, 100);           
      21.
              }
      22.
          }
      23.
           
      24.
          setInterval(updateLayout, 400);
      25.
    Notice that there isn't a nice event for "hey I just changed mode". Instead, we have to poll and check the current width.

    meta viewport

    There is also a lot of chat about the viewport tag, and people are experimenting with getting a nice outcome when jumping between the various modes. E.g.
    Code:
    HTML:
    
       1.
           
       2.
          <meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />
       3.
    View Source

    To do a lot of testing, it would help to be able to do a view source on other cool iPhone applications. this work, based on Abe's let's you.

    Drag and drop

    Everyone has been a bit frustrated with the lack of events, but between Tahoma Toelkes and Joe Hewitt, we have a drag demo that works when you do a two-finger vertical dragging motion on the phone, but only for certain elements such as textareas.

    Then comes the official docs

    After all of this tinkering, we finally get the official docs from Apple. They are a little sparse, and don't seem to have much new, but at least they are out there, and they are official.

    It is here that you can learn:

    * How Apple thinks you should specify an iPhone only set of style (mixed reviews on how IE handles this). The iPhone ignores the handheld profile as it thinks of itself as a desktop browser instead.
    Code:
          HTML:
             1.
                 
             2.
                <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
             3.
    * The various meta data for viewport:
    o width The default is 980. The range is [200, 10,000].
    o height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].
    o initial-scale is the scale to render the page when it first loads. The default fits the page to the screen. The range is [minimum-scale, maximum-scale]. Keep in mind that the user can change the scale, either through the pinch gesture or by a double tap.
    o user-scalable determines whether or not the user can scale the page. The default is yes.
    o minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].
    o maximum-scale is the upper bound for scaling. The default is 1.6; the range is [>0, 10].
    * How to interact with the apps from JavaScript
    o Phone call: <a href="tel:1-408-555-5555">1-408-555-5555</a>
    o Mail: <a href="mailto:[email protected]">John Frank</a>
    o Google Maps: <a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
    * How to embed a movie in a page (making sure to setup a preview image)
    * Making sure your text is readable
    * And much more.

    The documentation states that Safari for iPhone is your good old Safari, however there seem to be a LOT of differences in practice, and it has been said that the codebase was forked some time ago.

    More information on iPhone Development

    I recommend hanging out on the iPhoneWebDev group, and we are excited to have Joe Hewitt himself speak at The Ajax Experience in a few weeks, all about his experience with the iPhone, and what he has learnt.

  2. The Following 4 Users Say Thank You to ReVan For This Useful Post:

    blue_wind (10-09-2007), greenyoga (01-02-2013), Happylinks (09-02-2008), myat (08-23-2014)

  3. #2
    iPhone? More like MyPhone
    Join Date
    Aug 2008
    Posts
    283
    Thanks
    27
    Thanked 6 Times in 6 Posts

    this message is going to be a bit shorter than yours, but i'd love a simple app launcher that loads up all apps (hidden included) that is compatible with 3.0...

  4. #3
    What's Jailbreak?
    Join Date
    Nov 2012
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I like this thread,informative collection.

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts