I want to apply different style if my Multiple select is shown on a mobile device as an iPhone or Android, because it looks ugly. The question is how to detect it:
cannot use media-query for width, cause that may also include desktop browsers
cannot rely on pixel density, cause some tablets also have density>1
not sure if it is enough to just detect mobile browser
I do not want a (jQuery) replacement for <select multiple>, just want to be sure I'm styling one-line-ugly-mobile-ui (and not a desktop version). I do not care if solution is html only, Javascript, css or combination of all.
Related
I've got a website that utilizes :hover effects in the navbar & body.
Using the mobile version of Safari on i-devices, hover events become "double-tap" events: one tap to display what would normally appear when 'hovering', and a second tap to 'click' the link. This feature is useful for certain things... displaying a text dropdown on a thumbnail image, for instance, but annoying when selecting a navbar link.
On my android device using Chrome, the opposite occurs by default: Hover effects are simply ignored, no double click, nadda.
How might I modify the default ":hover becomes 'double-click' " behavior for specific objects on mobile versions of safari, while "adding" that functionality for android users?
I don't know the exact setup of your coding, but there are several options you have.
First of all instead of browser or OS detection it is better to use feature detection (if possible), because feature detection will work for every setup instead for specific browsers or OS'. There are some frameworks out there you can use like modernizr.
Another way to deal with things like this is to use CSS Hacks that only apply if it's the specific device/browser/OS. You will find hundreds of CSS Hacks in the net.
There are other ways to detect the browser/OS like the user agent string, for solutions going in this direction I can recommend this question How to detect Safari, Chrome, IE, Firefox and Opera browser? and Detecting iOS / Android Operating system.
What really fits your use case best, you have to decide yourself, but this are the options I suggest.
I’m looking for a library that provides mobile panning and zooming gestures on content within a div. The div itself should have a fixed width and height, but its content can exceed its size which means it must support overflow scrolling. Overflow scrolling using a pan gesture should work for all zoom levels.
I only need to support browsers on modern touch devices, e.g. iOS 9+.
The webpage itself has its zoom/pan disabled via a meta tag attribute so zooming/panning will be done only within divs.
I looked at svg-pan-zoom, jquery.panzoom, and a few others like them, but I only found libraries that support images. I need a library that supports arbitrary HTML content.
This links to a library that can help: http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html
I assume you want the zooming to be done with buttons, though if you wanted to do something like zooming with the scrollwheel this might be able to handle that too. Also works with any element (including divs)
My web application has to support multiple devices. I have written common css for all mobile pad devices, but it is giving some issues on iPad. I found the fix specifically for iPad.
Now I want to separate out css for iPad and galaxy device.
Is there any way to in media queries or any other way to load one css for ipad and another for galaxy device ?
You can do combinations using media queries to detect the device and target your CSS. Devices have a specific set of properties (resolution, orientation, width, height etc.) which you can use media queries to pick them out. Here's MDN's reference and another article for further reference, as well as a similar question
The only media query you can use is the one ask about the size of screen if this isn't enought for some reason (maybe screens are same size or you must know the model) you can work with this script to identify the device and load the relevant css according to the device.
You can very simply detect http request user agents for iOS devices like iPad or iPhone, by comparing them with regular expressions, and include relevant CSS accordingly.
A simple regular expression to detect iPhone/iPad would be :
(iPhone|iPad).*?OS ((\d+)_(\d+))(?:_(\d+))?
if, by 'the fix specifically for iPad', you mean a fix to the installed Safari instance - you should use feature detection.
it's most easy to do so using a designated JS library, i prefer Modernizr.
I have a need to create a part of a mobile web page that can scroll on its own (even though I tend to disagree with that being a good thing on mobile). The standard method is to set it to overflow: scroll and there you go.
Alas, on iOS one needs to use two fingers to scroll that area which many still feel is unintuitive. This will be fixed in iOS5, but until then, I need to support it with one touch.
So I found a few JS options. One is Scrollability. The catch is that it only supports iOS. In addition to iOS I need to support android, BlackBerry OS6 and Nokia. So that one is out.
I then tried iScroll. This works pretty well. The catch, for me, is that it does this through pure JS in that you never see a native scrollbar. As such, the scrollbar it generates is more of a dummy in that there's no way to make it work with a mouse or keyboard.
So, the question: Is anyone aware of a JS solution for creating a scrolling div on a mobile web page that a) allows for one-touch scrolling on touch devices and b) uses a native scroll bar to enable keyboard devices?
If there isn't one, we can revert to device detection, giving touch devices the JS and keyboard devices the scrollbar...though that still leaves us the issue of some touch devices also having keyboards.
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.