Viewing Why can't I pinch to zoom or double-tap my pics

Why can't I pinch to zoom or double-tap my pics



User: Christopher 11 years ago
...on my mobile redirect pages using my iPhone 5? iOS 8. Width: 400 px. Retina @2x images included...

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 11 years ago
I'd really like to get everything sorted out on one page before I commit to the rest of the site. Here's the link. Am I doing something wrong?

http://cleetche.com/documentaries/mobi-beach-hawkers.html

Last edit 11 years ago

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Jumbo T. 11 years ago
It's prevented :

<meta name="viewport" content="width=400, user-scalable=no" />

Don't ask me why, I'm not the expert.
User: Roddy 11 years ago
Ii's not scaleable because you are using a fixed width for your website pages.

Responsive websites use percentage widths. They are scaleable because the viewport width is set to the device width - not a fixed number of pixels.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Jumbo T. 11 years ago
Paste this in the HEAD code box of the site or the page and the page will zoom:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Demos

http://trotter.is-best.net/mobile/mobile1.html
http://trotter.is-best.net/mobile/mobile2.html

Last edit 11 years ago
User: Roddy 11 years ago
That's just part of the story. How much do you want it to scale?

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

Change the value for maximum scale. The default is 5.0 and the maximum is 10.0 but what is sensible?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Jumbo T. 11 years ago
That's odd. Earlier you said :

Quote:
Ii's not scaleable because you are using a fixed width for your website pages.


And something about percentages.

And now it is possible?
User: Roddy 11 years ago
Read the code you posted…

<meta name="viewport" content="width=400, user-scalable=no" />

That is a fixed width which is set by EverWeb and is not user adjustable within the application. If users want to be able to adjust the scale they should ask for this as a feature request.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Jumbo T. 11 years ago
The solution is very simple.

Do not use the mobile template.

Use a blank page or one of the other templates and resize it to 480.

And don't set the checkbox "use this page as a mobile page"

And manually add the JavaScript that redirects in the head code box of each page that needs to redirect to a mobile page.

Why not make the widget?
User: Roddy 11 years ago
I have been suggesting this method since the early stages of EverWeb's development…

http://everwebcodebox.com/mobile/design.html

I think the present method of creating a mobile version of a website is confusing as can be seen from user questions about it.

One of the biggest problems that I see from looking at users' mobile sites is that they are mostly creating a narrow version of their full size site using the same content. Creating the mobile version in the same project file as the full size one is just encouraging this misguided practice.

I was troubleshooting a mobile site today which, on the Home page alone, had over 300 shape images and over 30 actual photos.

Just about every user mobile site that I have seen uses text hyperlinks which are virtually useless on a smart phone. The importance and effectiveness of replacing them with CTA's is well documented. These, of course, should be created using HTML & CSS and not a bunch of shape images.

Quote:
Why not make the widget?


The code required is not exactly rocket science. It's been sitting on the Codebox website for a long time for those who take the time to do a little research before creating their masterpiece.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 11 years ago
(I'm really getting sick of this site logging me out. I just wrote a detailed post and now I have to rewrite the whole thing as it forced me to log in again without saving my post.)

Thanks guys for taking the time to make things a little less confusing. Your suggestions seem to make perfect sense. I don't understand why Rage is encouraging a different route? Is it just easier for a drop & drag application? You say we shouldn't use shapes on a mobile site but that's all that's being offered to us. Unless we inject code for every little thing.

Seems the only way I can send users to mobi.cleetche.com instead of cleetche.com/mobi-cleetche is to set up a subdomain with my hosting server and create a separate project in EW for a mobile site.

Jumbo, why are you suggesting a mobile page width of 480px? Roddy suggests 320.

Second question: if I want users to be able pinch and zoom into a photo, I assume I should be using a larger photo and reducing it on the page so it can be zoomed out with some clarity. I also assume this doesn't apply to text which is vector-based?

Roddy, I noticed you suggested that the iPad mini is 600px or less wide. I just googled it. It's 768.

Last edit 11 years ago

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 11 years ago
EverWeb suggests 480px wide. I originally suggested 320px because that's the width when viewed in portrait. If you site is 480px wide it will be squashed down in portrait mode and more difficult to view. A good compromise would be around 400px.

Setting up a sub domain for the mobile version of a site is normal practice. I still think it's better to create the mobile site on a separate project so that it's treated as new site and not a scaled down clone of the main one. It's fairly obvious from viewing user sites that most are not realizing the special considerations required for a mobile website.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 11 years ago
Quote: Roddy - 10/10/2014 5:01:38
That's just part of the story. How much do you want it to scale?

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

Change the value for maximum scale. The default is 5.0 and the maximum is 10.0 but what is sensible?


I had to amend the code so it reads:

<meta name="viewport" content="user-scalable=yes, width=device-width, maximum-scale=5.0" />

Otherwise, it was forcing it to an initial scale of 1.0 which was oversized for my device (375px). It works perfectly now and does not zoom smaller than the device width.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 11 years ago
5.0 is the recommended default.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.