I have a page that is straight from the jQueryMobile site. I'm including a table of names, but on the iPad, it doesn't allow the user to pinch the screen size.
Please refer to this answer:
http://forum.jquery.com/topic/problem-with-the-zoom-on-ipad
In short, jQuery Mobile injects a fixed viewport size into the page.
Related
I'm using the panel widget of JQuery Mobile: http://demos.jquerymobile.com/1.4.1/panel/
It looks very nice on phones, but on tablet devices the panel is too small with respect to the screen size.
How can I scale the panel size and its content to the 50% of the screen?
I tried using transform:scale(1.5), but it has a lot of side effects, then I tried to customize the css according to the last part of the page http://demos.jquerymobile.com/1.4.1/panel/, but nothing changed.
Is there a simple way to modify the framework or to dynamically change the size of the elements without creating side effects?
I have created a mobile application using Jquery Mobile and I want to manually set values to viewport for each page. How this can be done.
Motive: Client is using website in mobile and when hi zooms page with fingers and If he goes to another page the zoom remains same. He wants if he browse other page it will open as default size.
Thanks in advance
I am building a mobile website and need a fixed positioned button (for quick link to scroll to top) that should move across while scrolling the screen. fixed position is not supported by mobile browsers. Can anyone suggest the way around for the same. I am using twitter bootstrap. I have observed fixed position header and footers for mobile in jquery mobile framework but could use it in twitter bootstrap page.
Thanks in advance.
You can use a navbar-fixed-top or navbar-fixed-bottom navbar on your site and that will function properly on mobile devices. Refer to the Optional Display variations section under navbars http://twitter.github.com/bootstrap/components.html#navbar.
We are working on an application by using jQuery Mobile Framework. So far app working really fine, and now we are thinking about to use "media queries" conditional CSS scripts for different size of browser window.
Our idea is that, when someone access our app form mobile browser like iPhone/Android/Windows phone - they can view full width and full height. But when someone access from a regular desktop browser and it's width more than 800 PX , we need to re-size our app both width and height.
Issue is that, we want to set re-sized app window over an iPhone background & currently background position is fixed. I'd tried thousands of time for re-sizing width and height and able to re-sized width but can't re-sized height. Also, I need to change the position of our apps over the background.
Can any one suggest me how to change the height of JQM window?
Waiting for expert opinion.
Check to see if it may have to do with the viewport setting. I think we need some more details. It's a bit confusing on what you are actually asking.
I think the Viewpoint will handle the width and the content should handle the height of the page. I think there is a default for height as well.
Viewport meta tag Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level
and dimensions. If this isn't set, many mobile browsers will use a
"virtual" page width around 900 pixels to make it work well with
existing desktop sites but the screens may look zoomed out and too
wide. By setting the viewport attributes to
content="width=device-width, initial-scale=1", the width will be
set to the pixel width of the device screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
These settings do not disable the user's ability to zoom the pages,
which is nice from an accessibility perspective. There is a minor
issue in iOS that doesn't properly set the width when changing
orientations with these viewport settings, but this will hopefully be
fixed a a future release. You can set other viewport values to disable
zooming if required since this is part of your page content, not the
library.
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Also there is a gradeA global config option but not sure if this will help:
http://jquerymobile.com/test/docs/api/globalconfig.html
http://jquerymobile.com/test/docs/about/platforms.html
gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery Any support conditions
that must be met in order to proceed.
jQM offers Media Helpers but it's been deprecated but you can still download it and use it yourself.
http://jquerymobile.com/test/docs/api/mediahelpers.html
They suggest using response.js developed by Scott Jehl (jQM Team member)
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps