I am currently developing a qooxdoo desktop application and want to be able to use it with mobile browsers too. The application opens without problems and is
displayed correctly, but I cannot use the pinch gesture to zoom the
screen. Please help me!
In my index.html, already has this tag :
<meta name="viewport" content="width=device-width, initial-scale=0.1, minimum-scale=0, maximum-scale=10.0, user-scalable=1" />
There is qx.event.type.Pinch which gets fired on widgets you 'pinch' just listen to the pinch event and do something appropriate ...
Relying on the finer points "viewport" meta may not be very portable ...
Related
When I go to my website www.melonheadnj.com on safari I can pinch to zoom. However, when I click my link on my instagram page #melonheadnj I am unable to zoom.
I checked other links from other pages and they were able to zoom.
Would this be something in my mobile css?
In my theme's header.php file there was a meta tag...
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
By deleting the user-scalable=no, I was then again able to zoom in on the instagram browser. Weird that it was allowing me to zoom on safari mobile already though?
As already noted the viewport metadata is preventing native zoom. However, in Mobile Safari (webkit), Apple has chosen to no longer respect user-scalable=no and maximum-scale so user will always be able to natively zoom no matter what. This is to force accessibility support. See the webkit blog post on this.
i made a website responsive but when it loads into the phone it is zoomed automatically i applied view port as well but didn't find solution.
view port
j query
these doesn't solve my problem.
any one please help to fix this out
I understand your problem as I just solved a similar problem myself.
Method 1
You can specify the amount of zoom that is applied by targeting a specific device group. try adding this to your index.html
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
This should keep your website from trying to scale with zoom.
If this does not work then try targeting specific devices with css
#viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
Try playing around with the zoom and width values to find your device range.
Method 2
Open Firefox on your laptop or desktop and go to your site. and in the firefox options choose responsive view. Then press ctrl+shift+c and hover over your page to select the full page container. on the lower right hand side there will be a window with css. There you should find the element that is zooming in.
Also please update your question with your website
I'm having a bit of an issue. I have built a responsive site at http://www.nickpassaro.com/ClientSiteDev/New-NPD/ but for some reason, while it works perfectly on the desktop and rearranges its layout properly when you resize the browser window, it isn't working right on mobile devices. On the iPhone, its sending me to the tablet site, and on windows phone 8, it is showing me the mobile site but everything looks really zoomed out. My media queries are set to use under 640px for mobile, under 960 for tablet, and over 960 for desktop. Can someone hit view source on my site and see if they can see why it's using device pixels rather than CSS pixels?
thank you.
the reason its not working properly is that you have not assigned the Viewport.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
a basic viewport for your case can be:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I'm busy developing a portfolio website. This website should behave responsively, ie: the website should be fully displayed when browsing on smaller screens.
I have added the meta viewport tag, but it does not seem to work. At the moment you need to scroll horizontally to view the full content. I want it to be initially scaled to the width of the viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
I guess I am missing something, but no clue what..
I was having all kinds of problems with viewport. Finally I just removed all traces of that stupid thing, and everything seems to scale correctly now. It might be that current mobile browsers are smart enough to scale without use of viewport. Of course I am using media queries too.
I am making a small SVG widget aimed at iphones with a fixed footer.
The problem is I want to use native pinch & zoom that only affects everything bar this fixed footer.
However I cant use native pinch & zoom if i use
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Which is needed I believe to standardize the 320px width across mobile devices?
My thought was then (dare i say it) an iframe for the pinch/zoom stuff above the fixed footer but you need 2 fingers to scroll an iframe and 99% of users wont know that (unless there is a simple js fix for that?)
Any help/guidance much appreciated.
Adi.