1. #1
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default iPhone4 Retina Display

    iPhone4 Retina Display


    Hi Folks

    I'm working with Sencha Touch and I think is amazing, however I'd like to use the 640x960 resolution in my application, also I'd like to allow the user to zoom in/out.

    I define the "viewport" meta tag like this:

    HTML Code:
    <meta name="viewport" content = "width = device-width" />
    Also tried this:

    HTML Code:
    <meta name="viewport" content = "width = 640" />
    But it's not working , the resolution that i'm getting is 320, I'm testing in the iOS Simulator and in a real iPhone4.

    What can I do?

  2. #2
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    any idea? I also tried to set the width and height to the Ext.Panel that im using as a viewport:

    Code:
    Bleext.sabbath.views.Viewport = Ext.extend(Ext.Panel, {
    	id				: "viewport",
    	layout			: "card",
    	//fullscreen		: true,
    	width			: 640,
    	height		: 960,
    	renderTo		: "placeholder",
    	cls				: "bleext-sabbath-viewport",
    	
        initComponent	: function() {
    
            Bleext.sabbath.views.Viewport.superclass.initComponent.apply(this, arguments);
    		
        }
    });
    
    Ext.reg('sabbathviewport', Bleext.sabbath.views.Viewport);
    But is not working I'm getting just 350 px width, does anyone know why? and how can I use the 640px??

    Best regards

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    10
    Vote Rating
    0
    aeiz is on a distinguished road

      0  

    Default


    Doesn't this have to do with the iPhone 4 using a "virtual" resolution of 320 by 480 "units", where each "unit" is a certain number of actual pixels?

  4. #4
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    I don't think so because an image that is 640px width doesn't fit in the screen

    Does anyone can use the 640x960 resolution? what about zoom in/out a sencha application?

  5. #5

  6. #6
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    Hi folks!!

    I found the line of code responsible for not getting 640 width in my ifphone!!

    If you open the file "sencha-touch-debug-w-comments.js" and go to the line 22484 you'll find this:
    Code:
     /*
             * The viewport meta tag. This disables user scaling. This is supported
             * on most Android phones and all iOS devices and will probably be supported
             * on most future devices (like Blackberry, Palm etc).
             */
            if (!Ext.is.Desktop) {
                tag = Ext.get(document.createElement('meta'));
                tag.set({
                    name: 'viewport',
                    content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;'
                });
                head.appendChild(tag);     //<--- this is the line!!
            }
    As you can see this code add a meta tag to the header, this tag doesn't allow to zoom in/out and also the width is set to 'device-width'.

    There's not a way to disable adding this tag to the header by a configuration, so my workaround was to override the entire method and just comment that line, after this my app now is getting 640 width and 960 height.

    Best regards

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    nosuic is on a distinguished road

      0  

    Question


    Crysfel thanks for sharing that.

    In my case, I'm not including sencha-touch-debug-w-comments.js so I assume I don't need the override.

    So I change the width value in that line of code in my phoneGap project:

    HTML Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    to width=640 with no luck, as screen.width and screen.height remain 320x480.

    Any suggestions please?

    Thanks

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    kungfuters is on a distinguished road

      0  

    Default How To Save Images For Retina Display

    How To Save Images For Retina Display


    This is what I do to account for the difference between older iPhone displays and the iPhone4 Retina display.

    First, you were correct to use this:

    Code:
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    That will set up your viewport just fine. The trick is actually in your stylesheets. You will need two images for every image you want to use: one at 2x magnification for Retina displays, and one at standard size for non-Retina display. For example, say you wanted an image that spans the entire width of the screen and is 100px high, you would need two files:

    yourimage.png - The 320x100 image.
    yourimage@2x.png - The 640x200 image for Retina displays.

    You would then include your image using stylesheets. Here's where the critical stuff happens.

    First, the placeholder:
    Code:
    <div id="yourimage"></div>
    Then, the CSS:
    Code:
    #yourimage {
    height: 100px; width: 320px; -webkit-background-size: 320px 100px; // Critical line! background: url("images/yourimage.png") no-repeat;
    } // This detects the iPhone 4 Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #yourimage {
    background: url("images/yourimage@2x.png") no-repeat;
    }
    }
    Once you have that put together, you should be able to run your Sencha Touch app on both an iPhone and iPhone4 and get the high-res image on the iPhone4.

    Hope this helps! =)

  9. #9
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    Thank for share, this is great stuff!

    Regards

Similar Threads

  1. Replies: 1
    Last Post: 2 Feb 2011, 9:40 AM
  2. value field display instead of the display field name in combo box
    By farout in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 3 Jan 2011, 12:28 PM
  3. Embedded images (Site logos etc) on a Retina display
    By johnwards in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 11 Nov 2010, 2:47 PM
  4. How to display fields value from store to display field.
    By prasad508211 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 17 May 2010, 11:13 PM
  5. No data display in Firefox 3 but IE6 display
    By jmm1207 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Jul 2008, 7:40 AM

Thread Participants: 3