I am building a web application for iPhone. Since the application shows different content while in different orientations, the built-in animation between the two orientations animates the original content as well.
For better result, I would like to disable the animation between the portrait and landscape. Is there a way to do it for web app?
I have checked the <meta> tag but there is not a relevant one.
Thanks for any help!
Felix
I don't think this is possible. The only option there is for handling orientation in using viewport.
From the documentation (found here: http://developer.apple.com/safari/library/documentation/appleapplications/conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Dashcode_UserGuide.pdf), it states:
Viewport
The values in this section control how users can view
your mobile Safari web application
when they use it on iPhone or iPod
touch. When users change the device
orientation from portrait to
landscape, webpages can get scaled to
fit the new screen orientation. The
two options for the Orientation value
are:
“Adjust page width to fit.” When you choose this option, your web
application resizes (that is,
increases or decreases in width) when
the device orientation changes. This
option is generally recommended for
mobile Safari web applications,
because it enhances the user’s
perception of the web application as a
standalone application and not a
webpage.
"Zoom page to fit.” When you choose this option, the width of your mobile
Safari web application does not change
when the device orientation changes,
but the scale does. In other words,
the content of your web application
will appear a bit bigger. You might
want to choose this option if your web
application has a complicated layout
that you don’t want to change in width
when the device orientation changes.
An example:
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1.0">
Br,
Paul Peelen
Related
I am developing a website where links open in an iFrame. This keeps everything in flow. It works pretty well on computers but on mobile devices it lags a bit specially on chrome.
When user cliks a link the website is loaded in a modal in iFrame. Is there any way I can make sure that the scrolling is still smooth on mobile devices and speed up the load times of iFrame some how?
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
try :
<meta name="viewport" content="width=device-width, initial-scale=1">
Mobile browsers like render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale.
So your iFrame pages suppose to have the meta tag.
I am running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.
Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance
The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.
You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}
You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta
I am working on mobile compatibility of a site for my third party product, and I am facing position fixed issue.I am fixing a footer to viewport's bottom.Android below 2.3 & iOS devices below 5 do not support position fixed.
For such devices currently I have fix that I am calculation current width of viewport and then apply width to footer by js.
But problem occurs when there is less content on site or client's site add auto zoom meta in head.In this case screen is zoomed and content inside of footer breaks.
I can't use iScroll because it locks zoom functionality , and I can't mess with client's page.
Please suggest me some logical solution to this problem.
Wrote custom function , which people used to use in ancient times (IE6 times).
It checks if browser supports position fixed or not.If not then adjusts its position according to scroll/zoom.
Try using
<meta name="viewport" content="width=device-width, initial-scale=1">
so the zooming does not occur at the page load - but it's still available to the user!
I am designing website for mobile access and I want to set page width, height and button sizes, so they display filling up the screen. For example if user is using HTC HD , the whole screen would be 480x800 with button sized 240x200.
However IE mobile as well as Opera load the page with some zoom level, so the buttons display either too large or too small. How can I either read current zoom level in javascript or set it from javascript?
Take a look into <meta name="viewport">. It's supported across a wide variety of mobile platforms, including (AFAIK) iPhone, Android, Blackberry, Opera Mobile and even IE6 Mobile. Basically, it lets you preset the device width, zoom level, and max/min zoom. Have a look at the Apple developer site and for more info.
Also, you can use CSS media queries to detect the shape and size of the browser, and serve up different layouts (etc) accordingly. Again, these are fairly widely supported and the Apple developer site has more information.
You shouldn't rely on using JavaScript on mobile devices because it is still not widely supported across all phones. Instead you should set the width of the page to be the same as the browser width so your pages appear at 100%, e.g. body {width: 100%; margin: 0; padding: 0;}
As for buttons you should use relative values or use different image sizes if you are able to detect the browser width before the page is loaded.