I would like to have in my JQuery Mobile application both header and footer on a fixed position and, when the user pinches or zooms the front end, only the content area will become bigger or smaller while the header and footer will remainthe same size. Is it possible?
I guess it would be cool in some cases, but mobile browsers don't like fixing things on the screen and don't really support it. JQM makes some tricks, but not with zooming.
If you want you could disable scaling in meta viewport (set max and min), but that might not be the best thing to do in some apps.
Related
I have almost always used $(window).width() to check the viewport width. It normally works for both browsers and devices. But for a website on which I need to show a particular splash screen if viewport width is less than 768px, this is not working. It gives correct width upto a point but below that it keeps giving 980px howsoever narrow I make the browser. There are a few particular conditions for this site:
This site was responsive in beginning (using bootstrap) but then made non-responsive. For this we removed viewport meta tag and set following rule in css that overrides its responsive widths:
.container{ width: 1170px; }
If I resize the whole browser i.e. the window that contains all browser tabs, then it does give correct width (less than 980px also, which is the desired behaviour), but if I use development tools and use the mobile layouts from there then width is never reported to be below 980px.
It would not have mattered that it worked on resizing only the main browser window, but the issue is that it is not working in devices as well. I added an alert and on mobile devices, again width is never alerted to be less than 980px.
Can someone please suggest some solution for this or explain why it is not working as expected?
I can't seem to find any authoritative source, but there are many pages that mention smartphones assume a website is 980px wide unless told otherwise.
Apple's developer site for instance says
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different. See Supported Meta Tags for more on viewport.
Figure 3-4 Comparison of 320 and 980 viewport widths
(Incidentally, it was the iPhone which first did this, but other phones soon followed.)
So the solution is either to put
<meta name="viewport" content="width=device-width">
into the head (in your case, back into the head), or, acknowledge that the site is now not-responsive, and will not perform optimally on a phone!
RE-EDIT:
I am in the process of making a 1 page site. This is for a school and will only be accessed internally (like a page for different links that staff can quickly use to navigate to).
However sometimes staff have different sized windows open, when they open IE (it will auto re-direct them to my HTML page) is it possible to make sure they open it as 100% width and height?
Thanks,
Nick
Ya you can have width and height to take up 100% space but it is not easy to design a page like that for all resolutions. As you have to exapnd and shrink content both in height and width it becomes complex.better have a fixed width and have height according to the resolution(Again a problem with retina display). Here are some browser statistics- Link.
you are concerned about your page on different resolutions of desktops and laptops. But the bigger problem would be mobiles and tablets as they do count for quite a lot of web-traffic.
Better way of handling the problem is to go with responsive design and target 2560×1600 and above 1366x768 for desktops and few mobile and tablet resolutions.
Here is a link for responsive design resourses- resourses
Liquid design isn't too difficult.
If you mean you want your page to open in a new tab or in the same already maximised tab, search for that; SO has that covered already.
Don't worry about height. Just make it fill the width and let the user scroll.
I have an element with position fixed (pinned to any corner) on a page (which I do not necessarily have control over the meta viewport tag - it is an embedded widget for third party sites). On Mobile Safari when the user pinch zooms the page at a certain point the viewport becomes larger than the visible area. At that point the fixed position element stays attached to the viewport and is not necessarily in the visible area.
I would like to compare two widths: the width of the visible area and the width of the viewport. I believe the size of the visible area is window.innerWidth. I am not sure how to measure the viewport.
I have been trying to see the relationships between:
document.documentElement.clientWidth
screen.width
window.innerWidth
window.outerWidth
...But have not been able to see anything obvious.
This is butt ugly but it does show some code that almost works (view on iOS to see it working. Use a desktop and click edit at top right of page to see or edit code):
https://jsbin.com/jopamu (iOS only)
The trick with the "overzoom" calculation is nasty but it does compensate somewhat for the multiple viewport zooms. It is a complex problem to solve because there are competing issues:
pinch-zoom
zoom due to input focus
the "position:fixed" zoom
potentially the OS (accessibility) zoom
The possible solutions I have found are:
Position the menu using the calculations above and position:absolute - updating the left/top in onscroll event. Has ugly juddering (can improve a little by hiding and only showing when zooming/scrolling finishes).
Position the menu using position:fixed but change the left/top to correct the menu position as zooming/scrolling occurs. Much less judder but I couldn't quite get it 100% reliable (some race condition).
Not suitable for your case (and highly unrecommended due to risk of breaking things): you can prevent pinch zooming and iOS10 double-click zooming by cancelling default on touchstart. Difficult because it needs many other workarounds so normal touch works, and needs synthetic scrolling and zooming (but has ugly side effects such as preventing scrolling working sometimes and also interferes with accessability e.g. if voice accessability turned on etc etc).
If you just want to see the widths then use the older version:https://output.jsbin.com/jopamu/6
I'm developing a site which will have a 2-3 columns depending on the page.
Mobile support is important and we're already handling orientation changes on iOS/Android/others.
The viewport is initially sized to fit the width of one column. Most mobile browsers have "sticky" horizontal scrolling to make it easier to scroll up/down a column (minor left-right drags are ignored after significant up/down scrolling).
What I'd like is that once the users starts scrolling left/right that the scroll would "stick" again at the next column.
I don't know if this is even possible?
The alternative would be for us to size the page to the viewport with overflow:auto; and handle the scrolling ourselves. I imagine this would be more reliable cross-browser but it feels a little hacky and like it might be a lot of effort to polish properly.
Has anyone seen anything like this / have any suggestions?
We eventually implemented something very similar to that discussed in this question except with both horizontal and vertical scrolling.
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.