PDA

View Full Version : Changing viewport scale at runtime



Pablo Cabana
9 Jul 2010, 12:52 PM
Is it possible to change the safari´s viewport scale at runtime?
Usually the initial-scale=1.0. We can change it and begin with a different scale.
But when a orientation event happen, the scale return to 1.

I want to build an app that adapt to the screen size in the same way as when you see your photos on the iPhone.
I dont want the elements resizing independently. I want the entire app scaling.

Any tip?

TommyMaintz
13 Jul 2010, 11:56 AM
I don't really have any tips for you regarding this. I understand what you are trying to do, but we currently don't support anything like this. If you look into this and run into any particular issues, please let us know. I'm also interested in any solutions you come up with.

Pablo Cabana
13 Jul 2010, 12:02 PM
Thanks Tommy.
I´ve tried everything I know (I know just a little bit of javascript).
If you dont have any tips, I cannot do any more. :(

But is it a planned feature of Sencha Touch? Because it would be quite useful.
Or... do you think it is even possible to achieve that behavior with webkit mobile browsers?

Pablo Cabana
13 Jul 2010, 12:08 PM
This is the app/site I am doing:
www.cabanacriacao.com/iphone

The size is perfect when it works from the homescreen in fullscreen.
I would like to made the cards just to adapt to screen size, like I said before.

The images are backgrounds, and (after a doubletap) I have texts with a background.

When the screensize is minor then them, they are cut off. :(

I know you dont have any tip to make it work like I want, but any tip on the better "approach" to solve it?

TommyMaintz
14 Jul 2010, 12:03 PM
Oh, I really like your app. Simple but elegant.

Ive tried to dissect your source code, but found it hard to figure out what exactly you are trying to achieve.
Would it be possible for you to strip your example of all the code that isnt required to show what you are trying to do? Like the carousel with 2 items, without all the onorientation change logic etc. Just the most bare version of the app you can come up with. Then I can take a look and see if we can scale those cards based on screensize.

aw1zard2
14 Jul 2010, 12:18 PM
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

For other meta tag options.

Something else to look at...

http://www.justincarmony.com/blog/2008/04/21/iphone-web-development-controlling-the-viewport-via-javascript/

Pablo Cabana
16 Jul 2010, 7:20 AM
Thanks a lot aw1zard2. I think it is not achievable, since safaris´s docs says "You can set only the initial scale of the viewport".
I´ve tried to detect the screen size at the beginning, but it caused a lot of layout problems, because Sencha Touch deals with it, I think, in a very particular way.
The app just goes crazy. Sometimes it fit, sometimes stacks on the bottom of the screen. Sometime the doubletap trigger the safaris zoom and even the url adress bar sometimes goes away!
The best solution, I think is wait for next releases of sencha. The hability of removing the url adress bar would be just great and solve some of my problems.

Tommy, thanks again for all the help. You are my last hope. :)
Here is the files of the "barest" version I could do: http://cabanacriacao.com/iphone/carrouselDoubleTap.zip

nosarious
16 Jul 2010, 7:54 AM
I use a system on my project which allows the menubar to hide on orientation change and on initial opening of the page, but I have not figured out how the dots at the bottom of the carousel card can go to the actual bottom of the screen. It appears they are drawn, and then the menu bar moves up, and it would be nice to either remove them or have the menu bar move and then the buttons get drawn.

Either way, the code I use is in a few places. In the head of the html as a meta tag:



<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0, maximum-scale=1.0">

In the <body> of the html:

<body onorientationchange="setTimeout(function(){window.scrollTo(0,1)},100);updateOrientation();"
onload ="setTimeout(function() {window.scrollTo(0,1)},100);">

I cannot remember if this is necessary as part of the javascript (I wrote the code for this a month ago before starting the GAE implementation)


document.addEventListener('DOMContentLoaded', loaded, false);


As I said, implementing these things in these areas will get the bottom dots in the wrong places. You can see how it works here with this sample: http://straathof.acadnet.ca/fourthtest/

It would be nice if someone can suggest a way to get the display of these dots hidden (or in my case, avoided completely)

Pablo Cabana
16 Jul 2010, 8:49 AM
Cool nosarius! In my iphone I can see the dots perfectly. Maybe if you change the the "ui" parameter to "light" you will see it better.
I´ve already tried this window.scroll but it not worked on my app. I dont know why. I am trying here to get it, but I got nothing till now.

nosarious
16 Jul 2010, 9:49 AM
Thanks Pablo. For my application I don't want those dots to show up at all. Eventually you will be able to tap the article title to make the text shrink or grow (allowing you to see the entire image in the background) or double tap to return to the front 'cover' with all links to the different articles.

This is part of a longer-term project which will allow people to publish content to the ipad freely, as easy as writing a series of blog entries. For now I am 'hardcoding' the content so I can test the ability to save it as a fully cached webapp.

As I learn more about how Sencha is working, I am including the process on a separate web page so others may learn...

nosarious
16 Jul 2010, 10:55 AM
I see what you are meaning. You want the text area on the back of the cards to change the width depending on the orientation. I use css to change the width of the text areas depending on how your idevice is oriented... but I also use the html to store all the information I am displaying, instead of having it encoded in the javascript.

It's called Media Screen, and it is part of css. Google searches will help you find more information:
http://eisabainyo.net/weblog/2009/06/12/making-a-website-iphone-friendly-using-css/

A simplified version of what I use is this (placed in the css file):


/********************************
/* Orientation changes for the background and size
/********************************

/* For smaller devices */
@media screen and (min-width: 321px) and (max-width:480px){

#wrapper {
width:320px;
}

For smaller devices landscape
@media screen and (min-device-width: 321px) and (max-device-width:480px){

#wrapper {
width:480px;
}
}

*/
/* For smaller devices Portrait*/
@media screen and (max-width:320px){
#wrapper {
width:320px;
}
}



Then the text you are working with gets placed in a div named 'wrapper'.

If you can get this to work, great, but I haven't spend the time to do it right now...

Pablo Cabana
16 Jul 2010, 11:06 AM
nops!
I dont want to resize the text area. I want to resize the entire application.
The perfect world would be if my app work exactly as when viewing photos on the iphone.

nosarious
16 Jul 2010, 11:24 AM
but you said you want the entire app scaling. In iphoto on the iphone the photos are scaling. . .

With your app if you were to have a landscape photo on an landscape iphone, your text is readable. If you rotated your iphone your text becomes much smaller, as does your photo. This is what is happening in iphoto (except there is no text involved in iphoto)

You may be relying on the carousel too much in this case... A double click animates the photo out of the way, but replaces it with an identical-sized text-card. Your text card dimension is tied to your carousel photo. If you were to animate to a different kind of item that is more flexible with the viewport of the iphone orientation, then your text stays readable without having to zoom in...

Does that make sense?

Sorry about my comments earlier... they were more intended to fit your text to the screen, not the image.