So I have an app I made using phone gap as a wrapper and targeted at specifically iPad. Now I want to incorporate an iPhone version of the app but have it so that its all complied together in one app. So I guess what my question is, does phone gap allow for device specific layouts and let you use JavaScript to detect this?
Yes, but the fastest way is probably to get the screen size of the device and start from there:
var widthScreen = window.innerWidth;
var heightScreen = window.innerHeight;
According to the size you get you can safely assume if you're working on iPads vs. iPhone5 vs. iPhone4 and make your changes.
Related
I created a Web app and now converted this to a Cordova App. When I deploy it to my Windows Phone 8.1 device, the text is extremely small, much smaller than in the browser on the same device. I now created a mini app which just shows one line of text, same here, text is small in the Cordova App, text has normal size if I run it in the Browser on the same phone.
I tried creating it as Windows Phone 8 App, then the text has the right size.
I played around with the viewport meta tag, didn't change anything.
You may be running into a problem where certain web frameworks go into "iPad Mode" with devices that have a 768px effective width. This was a common problem with Twitter bootstrap.
There are some fixes suggested such as this one though you'd need to detect IE 11 instead of 10: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/
There was a bug in Windows Phone implementation, which didn’t calculate the viewport’s size in the correct way. This was fixed in Windows Phone Update 3 (8.0.10512), but unfortunately not for Nokia Lumia 920. Therefore, the recommended workaround is to add the following script:
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("#-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
If you are building a Cordova app, it should be sufficient to add the style to the style sheet of Windows Phone:
#-ms-viewport {
width: auto !important;
}
I'm looking at creating a responsive framework for my website - its a first for me. No fancy stuff just responsive through mobile -> tablet -> desktop.
I'm happy with how media queries work, however adding classes through javascript seems like another viable option.
It would be easy to do something like this:
function queryViewport() {
var $window = $(window);
var $body = $("body");
var windowWidth = $window.width();
var windowHeight = $window.height();
// Query window sizes to determine whether device is to be
// classified as a small mobile device or a larger tablet/
// desktop device.
var isMobile = windowWidth < 600 || windowHeight < 600;
$body.toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile);
// Calculate whether viewport is portrait or landscape
var isPortrait = windowHeight > windowWidth;
$body.toggleClass("portrait", isPortrait).toggleClass("landscape", !isPortrait);
}
However, I'm not an expert in this area - am I missing something or is it really that simple?
All advice appreciated.
you can use this minified jQuery snippet to detect if your user is
viewing using a mobile device. If you need to test for a specific
device I’ve included a collection of JavaScript snippets below which
can be used to detect various mobile handheld devices such as iPad,
iPhone, iPod, iDevice, Andriod, Blackberry, WebOs and Windows Phone.
if(jQuery.browser.mobile)
{
console.log("You are using a mobile device!");
}
else
{
console.log("You are not using a mobile device!");
}
See more DETECT MOBILE DEVICES USING JQUERY
See the link below to understand the difference
What is better: CSS media queries or JQuery mobile?
I would suggest media queries, as all future amends can be done in the CSS without adding more and more logic to a separate JS file for new breakpoints.
Additionally, the CSS solution is supported down to IE9+ and there are JS polyfills (Respond) for backwards compatibility. Basically it's just built in to CSS and works well. There seems little point of rewriting the same logic in javascript, having a new class for every new size.
On top of this, media queries allow you to target CSS as different media types such as print, or if you want to use height-based media queries or target retina displays you can do this without having to add new classes. As a rule the convention is to use media queries with JS fallbacks and I see no reason to suggest otherwise.
JS produces different results for detecting viewport heights and widths depending on how you get them:
In that case, you could get screen width using window.outerWidth, window.innerWidth, document.documentElement.clientWidth. All these produce different results, but the second will give you values identical to CSS #media breakpoint.
$(window).width() too, is different from #media breakpoint.
I depends on browser differences, e.g. if the take in account the vertical scrollbar or not. Better go with CSS.
While waiting for responsive design to find the way into a legacy web site, I would like to redirect a browser to a mobile version if the screen is smaller than 480px
Hunting around I came up with
var isSmall = window.matchMedia ?
window.matchMedia("screen and (max-width: 480px)") :
screen.width<=480;
Question
Is this acceptable in 2014 or is there a better/safer/newer method to do what I want without using useragent sniffing?
References
MDN Window.matchMedia
JavaScriptKit CSS media query matching in JavaScript using window.matchMedia()
QuirksMode screen.width is useless (hence the addition of matchMedia)
You could use a polyfill such as https://github.com/paulirish/matchMedia.js/
you can use bootstrap http://getbootstrap.com/ or
foundation http://foundation.zurb.com/
these two frameworks has a powerful multi device layouts.
Yes there is lot of tricky ways :) to choose windows width but our Team's view you didn't have to include any tricks to know just windows.width because jQuery has a .width() function like:
var window_width = $(window).width();
if( window_width <= 480 ){
console.log(window_width);
}
Iphone 4S, Iphone 5, Iphone 5S Every one's Screen Width is 320px. Your Mobile Resolution isn't your mobile's Screen Width. so when you include your tricks to know just windows width or something you just increase your Application's loadspeed this gonna be a problem for your user. But you know that was the designer's issue why they complicate the designs for developers & for End Users. :)
I am creating a cordova phonegap app using html (ofc.), in iOS 7 the back of the carrier, signal strength, battery and clock, is a part of the app itself. this means that if you have some content that is supposed to be at the top of the screen will be behind that topbar. i'm not a fan of moving everything down to fit, because in iOS6 and android (and properly everybody else), this top bar is not a part of the app.
is there a way to make the app window a bit smaller on iOS7 only, preferable a setting somewhere, or should i do some javascript to edit the css if the device is iOS7. and in this case, how do i do that?
Your phonegap app is running on a UIWebView, you can access its frame and resize it accordingly. If I understood you well, you can do that natively. Open up your phonegap project in Xcode, in MainViewController, in viewWillAppear:
// Apply this only for iOS7 running devices and later..
if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7) {
CGRect frame = self.webView.frame;
frame.origin.y = 20;// move the webview down to 20 px
frame.size.height = frame.size.height - 20;
self.webView.frame = frame;
}
There is a jQuery solution as well, but since this is only iOS7 related, the native way seems to be the most efficient.
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.