My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?
Related
I'm trying to have a snippet of text "zoom & fade in" once the page is loaded. To do so, I'm creating a div with the text inside and setting it to transform immediately:
.whatIwantZoomed {
opacity:0;
/* Vendor Prefixes here */
transform:scale(4,4);
/* Vendor Prefixes here */
transition:transform 1s, opacity 1s;
}
Now, when called from my Javascript function, an animated class is applied which reduces the scale to (1,1):
.whatIwantZoomed.animated {
opacity:1;
/* Vendor Prefixes here */
transform:scale(1,1);
}
Now, on mobile Safari (both iOS 7 & iOS 8), the effect actually does work. The problem is the scaled text is actually larger than the width of the viewport, causing it to 'resize' and zoom the page out. As the animation occurs, the page resizes back to how it should be.
What I'm trying to do here is remove this unwanted viewport width alteration. I've tried setting the body to have a property of overflow-x:hidden; to no avail, and I can't seem to get the viewport metatag to help me either.
Can anyone shed some light on a solution here? Thanks.
EDIT: Added a fiddle demonstrating this. Notice the scrollbars in the HTML frame? That's what I'm trying to prevent.
Try this
DEMO
div {
text-align:center;
background-color:red;
transform-origin: 50% 50%;
transform:perspective(1200) scale(1);
animation:animated 1s ease-in-out;
}
#keyframes animated{
from{transform:scale(10);opacity:0}
}
For anyone coming across this, it seems to be related to this bug
The root cause is things that are off screen incorrectly trigger safari (or wkwebview) to resize the viewport.
Add this to your viewport meta tag:
shrink-to-fit=no
I have created a big cartel theme and successfully installed it. Media queries inside the code work correctly on my computer, however when I load the site on my iPhone, it appears at the original width – it should be taking into account the max-device-width: 480px. Any help solving this issue would be really appreciated, thanks in advance.
Make sure you include !important as this overrides all other code:
#media screen and (min-width: 767px) and (max-width: 1200px) {
.class {
font-size:1.2em !important;
color:#ffffff;
}
}
Like that.
According to this article http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ one should be able to enable native-like momentum-scrolling like this:
body{
-webkit-overflow-scrolling: touch;
}
However, this doesn't change anything in my webapp. It scrolls the same with or without that property. I expected to have a longer momentum like native apps do.
I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this.
Any tips?
Further info
Ok, it "kind-of" works like this:
html, body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position:relative;
}
however, anything with position:fixed inside the BODY-tag moves while scrolling and re-attaches to it's correct position when scrolling stops. Is there something I can do to fix this?
Anyone having any input on this?
Fiddle:
http://jsfiddle.net/nMxEg/1/
Use a Div with a set height, and perform the scroll with touchscroll on the div. The header and footer can remain as fixed divs at an the same level in the DOM.
<div id="fixedheader"></div>
Unfortunately, iOS doesn't have full support for fixed.
http://caniuse.com/css-fixed
I've been doing some research about viewport issues in iPod and iPhone 4's Safari, but i can't find any answer on this matter.
There are several threads about issues going from portrait to landscape, but not from landscape to portrait.
The issue is the following:
I used to have the normal zooming issue when going from portrait to landscape so i added the tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
So that fixed that issue.
NOW, when I go back to portrait mode, the page I made gets streched and it renders with an added right margin. This makes the page wider, so you have to sweep to the left to get the original position of the page (thought it keeps the new 'right margin').
Sorry if there was someone that already answered this, but i just couldn't seem to find any response to this issue.
Let me know if some additional information is required.
Please keep in mind it's my first question :/
Thank you!
EDIT: I'm running iOS 6, and getting this issue. When i run my page on an iOS 5.1.1 it displays properly, so it might be a new version of the viewport bug that was fixed before.
I think you want to add this to your CSS or style block. (It was in this post)
html {
-webkit-text-size-adjust: none; /* Never autoresize text */
}
I found a workaround for this via jquery and css. I have no idea how effective it works, but it's an option that worked for my needs. Basically, add the #orient id tag to your body tag, and then make the .ios6-mobile class that has a max-width of the device that you are seeing an issue with. In my instance, it was for iphone size that are running ios6, so I had a max-width of 320px. Here is the jquery code.
jQuery
window.addEventListener("orientationchange", function() {
if(window.orientation == 0){
$("#orient").addClass("io6-mobile");
} else if (window.orientation !== 0){
$("#orient").removeClass("io6-mobile");
}
}, false);
CSS
#orient { /* Don't need any code. Just a helpful ID to pass to jQuery */ }
.ios6-mobile { max-width:320px /* change the width to whatever size your device is */; overflow:hidden; }
Hope this helps in some way!
This helped me to solve same issue
#media (max-width:640px) and (orientation: landscape) {
body {-webkit-text-size-adjust: 100%;}
}
And for Retina display bug
#media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
body {-webkit-text-size-adjust: 70%;}
}
This is a bit of an odd one and was wondering if anyone had a solution.
We're building a few websites just now that are over 1000px in width and for some reason when the iPad loads them up in portrait mode it's scaling them down but leaving some width on the right so you have to scroll just a little over to see everything.
I added <meta name="viewport" content="initial-scale=0.7;" /> which does fix the problem but when loaded in landscape the user is presented with a small site to start with and can zoom out too far.
An example of this can be seen on one of my personal development sites. This isn't live yet so please ignore any bugs http://www.dundeewebstandards.com/events/
Thanks,
Chris
I had this same problem and tried all of the proposed solutions that I could find, to no avail. Finally, I figured it out... If the height of your page is less than 1024px and the width is greater than 768px, the native zoom functionality does not work as expected. This is also true if the width of your page is greater than it's height. Try using a media query to add a min-height to your page. Here is the code I used to fix this problem...
#page-container{
width: 1200px;
margin: 0 auto;
}
#media screen and (min-width: 768px) {
#page-container{
min-height: 1240px;
}
}