I am building a site with zurb-foundation. On a laptop browser everything works as expected. When the window is max size it displays the large grid and when I shrink the size down it switches to the small grid.
When I load it up on a phone however it displays on a large grid. I tried increasing the size of the small grid and phones finally display the small grid at 1000px however this stretches out the content and the fixed nav at the top doesn't get forced into the drop down mode that I want. I am using zurb-foundation (4.3.1). Any help will be greatly appreciated.
I was missing the view port meta tag which apparently is important lol.
Something like
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
Related
I am using highchart in react. It looks good in desktop view where as it looks too smaller in mobile devices. how can we make this responsive to make it look better in mobile devices.
Container height is set to 100% then chart appears in full screen but still font and labels are looks smaller.
When we use the highchart in REACT then index.html should have body tag with root div.
I have a site (ils-main.attorneysonlinepreview.com) that scales properly for everything except the menu bar. It's a fixed width site and I've set the viewport meta tag appropriately. For some reason, the menu items are scaling up instead of down so they wrap instead of fitting as they should.
Anyone seen anything like this before?
The issue is only on the iPad, not on 'real' computers. The scaling issue is there on Chrome on the iPad as well. The menu should have 5 items, but the last two wrap and because it's white lettering on white back ground, you might not have noticed it.
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)
I notice that on sites such as http://twitter.com and http://www.linkedin.com, when opened in an Ipad using safari, the page's width is locked to the window so even if you try to scroll horizontally it will not budge, whereas on my site the frame will move, revealing a grey background.
Does anyone know how the pages listed above do this.
I am using the:
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=2.0">
as the way to control some properties but have yet to discover the way to lock/prevent the page from being able to move from left to right. vertical scrolling is perfect ofcourse.
Just to clarify, the page doesnt have a horiz scroll bar as it is fixed to 1024px and is centered, never-the-less, when you use your finger and move it from left to right or vice versa it will move the entire window and show grey behind it. It will be great to find out how pages stop that from happening.
Thanks guys and I appreciate it, once again this is hard to find on the tinterwebs and should come in handy for others who want to do the same. :D
//Giles
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