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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."