I just need a boolean to say whether the device is a desktop or not because the design team has given us requirements to behave differently depending on if the webpage is run on a desktop or a tablet. We can assume tablets mean iOS and Android, and desktop is Linux, Windows, MacOS. A Surface Pro would count as desktop. We cannot make any assumptions based on the screen size. There are large tablets and small desktops.
More broadly, we are using Expo React-Native (managed) web target, if CSS cannot provide this information.
CSS itself cannot detect Surface Pro well, you should use JavaScript instead.
It's not difficult to detect the operating system, but for Surface Pro, it is actually a tablet, but you counted it as a desktop.
Here is a rough way to do so and also this, but the result is not guaranteed, since it's based on the User Agent string.
Related
I use a tablet for all my schoolwork because I don't have a good computer, but websites often come up in mobile device format. Is there a way to set my browser to tell websites that it is a computer, and not a tablet? If it were possible, would this cause any other problems, like disabling the touchscreen, or anything like that?
There's a couple different ways to tell if you're using a tablet. Typically it's either by:
screen size (noting the typical width/height ratios of devices) and then styling by media query
the window.navigator object in the browser is aware of a handful of useful info, such as OS and browser details
Each site will determine this differently so I wouldn't be confident there's a catch-all solution to this one...that being said sometimes landscape will get desktop styling if the devs used the sizing method ¯_(ツ)_/¯
we have a mobile application developed using Kony. We are trying to port the same to desktop version. Everything goes well but there are small challenges wrt UI i.e., responsive UI. Since I am new to Kony please guide me if there is a way to include media queries in a Kony application or what could be trick to make the app responsive on browser.
Thanks.
Kony does not currently support media queries to say "for screens of this size use this css rules". Remember in Kony your styling is done with skinning, not CSS3. Skins do translate into css for web apps, but that's a different story.
In Kony the approach is different. You design your forms for different screen sizes based on the type of mobile device: Mobile phone, tablet, desktop, watch, etc.
If you come from a web development background like I do, you might even be expecting a grid system like in Bootstrap or Foundation. But bear in mind that the real value of responsive design is not having to worry about the resolution of the screen, except Kony already gives you this through the use of Dp units instead of pixels. So the same mobile form design will adapt to any mobile device resolution. The same tablet form will adapt to any tablet resolution and so on.
For different device types, the premise is that your desktop and mobile screens will most likely be very different, or even start alike but evolve differently over time.
So the solution is to just copy your form from the "Mobile" subtree (right-click>copy) and paste it under the "Desktop" subtree. Then you'll be able to edit them independently.
I hope this helps.
Edit:
Starting with Visualizer V8 SP2 Kony does support Responsive Design.
I'm using the visibility-classes of Foundation (http://foundation.zurb.com/docs/components/visibility.html) in order to display my website differently on mobile devices.
However the more recent smartphones have insane scree-dimensions (e.g. Nexus 6 2560 × 1440 Pixel).
I don't have such a device and therefore can't test whether classes like hide-for-small-onlystill work there. Afaik small means less than 640 pixels.
So how can I deliver the same page across all smartphones? Even though these devices have huge screen-dimensions I'd still like to display a simplified homepage.
Foundation visibility classes are based on media queries that checks only screen width.
If you want to target mobile devices you can detect mobile device (not the best practice but useful many times). here is a good way to do it: http://detectmobilebrowsers.com/
once you detect the mobile user (on the back-end or front-end) you can add a class to your body and target that separately on your css.
Unfortunately, I don't think there an easy workaround this.
I have been looking into media queries, but so far all the examples I can find on google and Stack Overflow have been to use specific sizes (max-width, max-device-width, etc.) The problem with this is that it doesn't give me the flexibility I need. I want to be able to deliver a ** specifically tailored** experience to desktops and tablets.
The reason I want to do this is that interacting with a tablet is different than interacting with a small computer monitor. An iPad in landscape orientation is 1024x768, which also happens to be a common computer monitor size. The difference however is that on a computer, pointing to small controls with a mouse is easy, but it is very difficult to tap the same size controls on an iPad, especially for someone with large or clumsy fingers.
How can I deliver a tailored experience to an iPad user vs a desktop user with a monitor of the same size? I'd like the desktop experience to not be forced to use jumbo sized buttons that a touch experience requires.
Is this possible with media queries, or something else? I see that there's a "handheld" option for media queries, but I've read that most small device browsers ignore this.
It's not possible with media queries. There is a "handheld" media type, but most, if not all modern handheld devices identify themselves as "screen".
To do it with javascript, see this question:
What's the best way to detect a 'touch screen' device using JavaScript?
The iPhone 4's Retina display is double the density of of the iPhone 3, but Apple handled it fairly nicely but just making an assumption and doubling the pixels when rendering (so that your web page looks the same physical size on each device). You can then use some webkit media queries to load additional CSS just for that device (-webkit-min-device-pixel-ratio:2).
The question: Is there a resource that a) lists the other mobile devices that are now using high PPI screens b) what the device does by default in terms of rendering web sites and c) if it supports the webkit check and/or it's own custom detection method?
If not, perhaps this post could become that resource (CW) by posting info on specific devices as answers. I have to start dealing with BlackBerry and Nokia devices that are using the high res screens (and Android coming along). Any data appreciated!
UPDATE:
After some testing, I'm finding that there really aren't any other mobile devices that identify themselves as double-density as the iPhone 4 does. There are screens with much higher PPIs now (often on smaller devices) but the device doesn't in any way declare itself as high PPI. Perhaps a better way to explain it is that those devices just have 'really small pixels'.
As such, there really isn't a practical way to handle those devices given that ALL sites are rendered the same, so any attempt at modifying yours will likely interfere with the user's own preferences and settings.
If anyone knows of any devices other than the iPhone 4 that properly declare themselves as high PPI, let me now!
See here for a similar quesiton:
How to target iPhone 3GS AND iPhone 4 in one media query?
I asked it a few days back, I don't think there is a list of such things but if you know the devices you want to target it is not hard to find out and thus target these devices.
The best detection method is to use CSS3 #media queries, and given that Opera is the most popular mobile browser it is a safe assumption to use the webkit extension along side the #media queries.