Suppose I have a site with keyboard shortcuts, where I want to display said keyboard shortcuts visually as part of whatever element they apply to.
On a touch interface, especially a phone, I don't want to bother because:
nobody would use a soft-keyboard this way even if they could
the visual display of the keyboard shortcut takes up valuable real-estate
it's perhaps confusing, or at least inelegant, to display keyboard shortcuts in a keyboardless context
However, the media query documentation doesn't seem to mention anything about this.
It's 2016, is this still impossible?
Unfortunately there is no query in Media Queries 4 to identify the existence of a keyboard.
There are other new queries though that might be helpful.
In my own application I'm assuming that a keyboard exists when there is a mouse or a touchpad as primary input. You can query for that with
#media (hover: hover) and (pointer: fine) { ... }
This query would go false for devices with a touchscreen, stylus devices and also exotic devices like camera input.
Note that with this query you're querying for primary input devices. You can query all input devices with
any-hover and any-pointer.
Also note that as of date, the adoption for MQ4 is 81% of all browsers, but no Firefox: https://caniuse.com/#feat=css-media-interaction
Media Queries 4 does not provide any media features for determining whether a physical keyboard is attached. There's nothing stopping you from proposing such a feature for MQ4 or MQ5 over at the www-style mailing list, though keep in mind whether such a media feature would be easy for vendors to implement is another story.
Related
I am trying to adapt an HTML based app for Chromecast and everything is working fine, except that the ":focus" is not taken into account in the CSS.
I am using it to display differently some items (basically the equivalent of the "selected item").
The focus is handled properly (calling ".focus()" on some DOM node works fine), just the display is not done properly.
I suspect this could be intentional as there is no keyboard and such for Chromecast. I could always rewrite the whole CSS to add a "focused" class on the element, but rewriting the whole thing just for Chromecast as it is already working on a number of platforms seems a bad idea.
Is there a way to activate the support for ":focus" in the CSS ?
Is there a work around ?
Best Regards
JN
The idea behind the chromecast is not to have a UI in the way that you are describing; the "control/navigation" is on the second screen and the consumption of content (playback of media, for example) is on TV. As an example, consider the Google Play Music. User picks up her mobile device, navigates through albums and such on her device till she finds the desired content. During this interaction, the TV screen doesn't try to show the navigation that is happening on her device and that makes sense since she is not even looking at the TV; in fact, it would have been pretty difficult to look at TV (assuming it was mirroring her mobile display) and navigate on her mobile device; user doesn't want to move her eyes from one to the other while she is searching through her content. Finally when she finds what she casts that to TV and can listen to that on her TV. It is the same behavior with the TV and Movies app, Netflix and Hulu+ as well and it is strongly recommended you follow the same pattern.
I am attempting to record an app demo on the simulator, and want to use the Quicktime screen capture feature. However, I would like to hide the mouse during the capture.
Is this possible?
Doesn't seem to be a built in feature, so I am assuming I need to use some sort of plugin or hack.
Any suggestions?
QuickTime itself does not seem to offer this functionality therefore you have to resort to some other means to hide the cursor. On OSX there are some tools that allow this.
Cursourcerer is the first that springs to mind. However, as this really hides the cursor, it might not be ideal as you yourself will not be able to see what you are doing.
However, if you do not need to use QuickTime per se, it seems there are commercial screen recording solutions allowing this sort of thing such as Screenflow. I am not affiliated but the price seems reasonable and there is a demonstration of desired behavior here.
You don't record your app in your computer, but directly on your iPad or iPhone, connected to your Mac with a lightning cable. Then in Quicktime you select the "New movie recording" option (instead of "New screen recording"), then you will be able to select your iPad/iPhone as the "camera" and start recording your app running in your iOS device without any mouse pointer.
https://obsproject.com/
OBS can record your app window, and it ignores the cursor on the window.
Useful even if you are not a youtuber.
Cursorcerer for 10.14+ ⇨
http://doomlaser.com/cursorcerer-hide-your-cursor-at-will/
MouseHider.app for 10.13 and earlier ⇨ https://apps.apple.com/us/app/mouse-hider/id894419721?mt=12
I use option+command+k (⌥+⌘+k) to show / hide. It works globally.
It's also useful to hide the mouse cursor when you do the control-scroll zoom trick to focus in on a video.
I need to create a page which will look differently on an ipad. I have never done this before so I have a few questions:
1) How can I make a page know its being viewed on an ipad for css purposes?
2) If some content on the page is different for an ipad, how can I use php to know what device is loading the page (because this can't be done with css)?
I'll start by answering your second question. The only way to detect a particular device type in server-side code is through user-agent parsing. In PHP, you could do this with the strpos() function, which returns FALSE if the second string parameter is not contained in the first. For example:
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'iPad') !== FALSE) {
// load iPad-specific content
} else {
// load content for other devices
}
To answer your first question, there is no way to detect only an iPad using CSS. You could use media queries to target 1024x768 displays, but these would apply to any screen with that resolution (not just the iPad). If you want to apply iPad-specific CSS styles, load a unique stylesheet with the aforementioned PHP code.
However, it should be pointed out that device detection is generally a bad practice, since it will not account for changing browser capabilities, market trends, or user-agent spoofing. In most-cases, CSS media queries provide a more robust, forward-leaning approach to supporting various devices. Why? Because they target device types, rather than specific models. This means that your site can work well today on iPad, Android, and Windows tablets, and next year on whatever hot new xyz device hits the market (without requiring code changes).
http://css-tricks.com/snippets/css/ipad-specific-css/
http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/
http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
this might help you it is well written article...
Use media queries to hide/display/change content for different devices.
I am developing website and it has to be viewed in tablet pc. Please suggest me what are things to be considered ? technology wise ?
also i need to know what are the tools i need to have to view in my intranet as well as.
A major issue: in many tablets there is no moving pointer - at least not in a fully usable form. That means that tooltips may not really work, and image maps must be really clear, since there is no highlighting until the user actually "clicks" on the link.
Well, actually that's not fully accurate - if the user drags the pointer, it should work like a regular mouse pointer. The problem is that most users avoid dragging and just tap where they want to click directly.
Best piece of advice I can offer: get an actual tablet PC and try browsing your site. Most major issues will be evident almost immediately. If you are able, get a regular tablet/pad user to beta-test your site without trying it out on a desktop PC - they would be able to see issues that you would miss due to your prior knowledge of the site.
The Tablet PC is a standard Windows machine, therefore it has the same browser support as any other Windows box. So there isn't any special technology required.
There are however some design considerations:
First, make sure your layout has plenty of empty space surrounding iterative elements. Crammed pages are tough to navigate with a stylus, and if it is one of the newer models that also support touch it is even more of an issue.
Second, most Tablet PCs are configured with the default font size set for 125%. You want to make sure that your web pages scale correctly and don't end up requiring horizontal scrolling to see the full width of the page.
A second point regarding scaling, Tablet PC supports both Landscape and Portrait modes. In other words, it can be 1024x768 OR 768x1024. You'll want to make sure that your user experience is acceptable in both modes.
One thing i can think of : there is no 'hover' on most tablets, and if it's there at all, likely nobody will see it.
Not all tablets support flash, but they do all support javascript, and Prototype.JS or jQuery will run on them in most cases
I am trying to determine what kind of interface to show to a user. If a user is visiting my site with a touch screen phone, I want to show them one interface, otherwise, I want to show them another.
Does anyone know of a list of UserAgent string values so I can do this check? I know I can check for the iPhone using the following code in ASP.NET:
Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase)
However, I would really like to find a list for other similar phones like
Palm Pre
Blackberry Thunder
etc.
The Mobile Device Browser File might be of some help. Example: http://www.hanselman.com/blog/MixMobileWebSitesWithASPNETMVCAndTheMobileBrowserDefinitionFile.aspx
I prefer WURFL, it is most up date database. And you can use .NET API Marg.Wurfl.
As far as i know at present,there are 147 different webphone browsers if you count versions as being different and 2438 makes/models (Samsung has about 180).
Having just a list i think is useless as there are android phones that do not report that name in the userAgent string; which implies that maybe nothing else is useful with that string.
Instead,use a set of simple PC-based browser tests and let the failure be "by gollie i am going to treat this user as a webphone".
Safe to test any "standard" browser IE6 to IE9 (have not tested beyond that) or mozilla; at fall thru test for Safari, Chrome or Opera. Treat those last 3 as webphone, and fail of those tests, treat user as a webphone.
Even IE5 acts fairly decently on moer "modern" web pages!
So one set of pages for standard, and another for limited, junkie (Safari and Opera are in both classes), or extremely variable webphones.
The lowest, junkiest webphone i have seen is the TracFone LG800G; rather limited memory and worse, limited page size.
Do not ask what those limits are as nobody is talking,but they are small compared to anything else.