Handling Zoom Questions:

ArtOfWarfare · Oct 13, 2012

Hi, I'm designing a website that should work in the following browsers:

- Mobile Safari
- Desktop Safari
- Android Browser (?)
- Mobile Chrome
- Desktop Chrome

They're all Webkit based so that should hopefully make this easy.

1 - I want to detect how far in/out the user is currently zoomed.
2 - I want some items to remain the same size regardless of zoom level (IE: think of the pushpins in iOS maps. When you zoom around them, the map around them changes scale, but the pins don't.)
3 - I want to invoke zooming when some items are tapped on.
4 - I want to detect when zooms are occurring (no matter the cause.)

The mobile browsers are top importance. It's okay if Desktop Safari / Desktop Chrome don't end up being supported, given zoom is much less common on those browsers.

Also, this website will be used internally only. We couldn't care less if FF/IE/Opera were supported or not.

Lambros · Oct 30, 2012

ArtOfWarfare said:
Hi, I'm designing a website that should work in the following browsers:

- Mobile Safari
- Desktop Safari
- Android Browser (?)
- Mobile Chrome
- Desktop Chrome

They're all Webkit based so that should hopefully make this easy.

1 - I want to detect how far in/out the user is currently zoomed.
2 - I want some items to remain the same size regardless of zoom level (IE: think of the pushpins in iOS maps. When you zoom around them, the map around them changes scale, but the pins don't.)
3 - I want to invoke zooming when some items are tapped on.
4 - I want to detect when zooms are occurring (no matter the cause.)

The mobile browsers are top importance. It's okay if Desktop Safari / Desktop Chrome don't end up being supported, given zoom is much less common on those browsers.

Also, this website will be used internally only. We couldn't care less if FF/IE/Opera were supported or not.

We need more information on what the website does. But from my knowledge, it'd be largely JavaScript/jQuery which detects all this.

Take a look here. That covers some of the basic mobile movements, and you can choose how your website will respond.

You will also need to ensure the website has a fluid/responsive width (so, instead of creating a website with a 960px width, it'd be 100% of the screen size). In other words, you're working in percentages, not pixels/em.

However, we do need more information.

ArtOfWarfare · Oct 30, 2012

Lambros said:
We need more information on what the website does. But from my knowledge, it'd be largely JavaScript/jQuery which detects all this.

Take a look here. That covers some of the basic mobile movements, and you can choose how your website will respond.

You will also need to ensure the website has a fluid/responsive width (so, instead of creating a website with a 960px width, it'd be 100% of the screen size). In other words, you're working in percentages, not pixels/em.

However, we do need more information.

I'm looking to make a web based animated blueprint that works something like the Maps application, where there's a large amount of data to show on a screen that may only be 3" across. Thus the need for pinch and zoom. When certain elements of the blueprint are tapped, popup bubbles should appear, similar to the pins you can drop on maps. When you zoom with a visible pin in maps, the pin remains the same size but maintains its position so it's still pointing at the right item... I'd like my web app blueprint to do the same thing.

The website is here:

https://dl.dropbox.com/u/60354330/site/index.html

The bubbles were working the other day... I must have broken them at some point... I don't know when... oh well, that's not terribly important for the question.

Your link doesn't seem to have anything about zooming/scaling/pinching... which part of it do you think I should look at?

Thanks

960design · Oct 31, 2012

While reading through the post impress.js came to mind. ( Will not work for mobile as it is, but you could use the base idea to create something mobile ). I've never used it for a 'live' site, but use it constantly for presentations, tech demos, training classes, ect.

Example here ( sadly, I cannot claim credit for this fantastic work ):
http://bartaz.github.com/impress.js/#/bored

just impressed!

Lambros · Nov 1, 2012

ArtOfWarfare said:
I'm looking to make a web based animated blueprint that works something like the Maps application, where there's a large amount of data to show on a screen that may only be 3" across. Thus the need for pinch and zoom. When certain elements of the blueprint are tapped, popup bubbles should appear, similar to the pins you can drop on maps. When you zoom with a visible pin in maps, the pin remains the same size but maintains its position so it's still pointing at the right item... I'd like my web app blueprint to do the same thing.

The website is here:

https://dl.dropbox.com/u/60354330/site/index.html

The bubbles were working the other day... I must have broken them at some point... I don't know when... oh well, that's not terribly important for the question.

Your link doesn't seem to have anything about zooming/scaling/pinching... which part of it do you think I should look at?

Thanks

So to my understanding, you have a blueprint containing certain elements which, upon zooming, do not scale. However, when zooming, some elements will change size. The best thing to do here is essentially import your blueprint to the design. This will have a fixed (static) width (defined in pixels/em). However, upon zoom, I understand some icons should remain the same size. For this, you will need to apply fluid elements to those parts of the website. Fluid elements allow certain parts of the website to remain the same size upon zoom. These typically use percentages instead of pixels/em.

If you'd like me to elaborate more, let me know. But I would look into using a combination of static and fluid css. No jQuery or JavaScript seems necessary, unless you want to limit this website to mobile users.

Search

Search

Handling Zoom Questions:

ArtOfWarfare

macrumors G3

Lambros

macrumors regular

ArtOfWarfare

macrumors G3

960design

macrumors 68040

Lambros

macrumors regular

Our Staff