Should I view every mobile phone smaller than 768 pixels on a touch device?

I am building a website that behaves differently on a touch device than on a desktop. The main difference is that most hover effects change to clicks on touch devices. To check if the user agent is a touch device, I use it in javascript:

var yesIfTouchDevice = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); if(istouchdevice) { // change hover to clicks } 

Then in css, I assumed that every user agent below 768px would be a touch device. I made a layout, believing this. For instance. I have a toggle button that shows a menu when pressed. Further, I have many other things that show a popup and another hidden layer only when clicked (touch event).

Just a few minutes ago, the idea arose that there are many mobile phones that do not support touch, such as Nokia Asha and N series, and many others that I do not even know about. My question is:

  • What is the market share of contactless mobile browsers? How many percent of users use these browsers?
  • I made my entire site with a bootstrap suggesting touch functionality for devices with small screens. Does modern html css methods use the best recommendations on creating a website for mobile devices with a touch screen only?

Edit:. Listening to the suggestions that I decided to optimize for mobile devices without touching. But I'm not sure how they mimic the behavior of the mouse in general. I assume that elements that are focusable can be selected and clicked. So,

  1. Do I have to do all my elements that work on hover, for example. tabindex = "1" navigation using tabindex = "1" ?

I tested my site on the Opera mini-browser in Kemulator and found that it reloads the page when I click on the navigation, and some other layers are not displayed, for example. boot modal pops up.

  1. Does Opera Mini browser support bad javascript?
+6
source share
3 answers
  • What is the market share of contactless mobile browsers? How many percent of users use these browsers?

We do not have this data. But based on the current market share of users and users on devices, it barely reaches 1%. But the main problem is not that mobile devices do not touch. Browser windows are not always maximized, the user can reduce thei width even <768px. i.e. Use a side-by-side browser and notepad with a resolution of 1400 x 900.

  1. I made my entire site with a bootstrap suggesting touch functionality for devices with small screens. Does modern html css methods use the best recommendations about creating a website only for mobile devices with touch controls?

Not. The current offer is a responsive design using a mobile approach. Using a mobile site, you can duplicate code, design, maintenance and costs. It also affects SEO and traffic analysis for business purposes.

Should I do all of my elements that work with hovering, for example? focusable navigation using tabindex = "1"?

Yes and no. All clickable elements (buttons, links) and the input form should be an object of accessible navigation, but you do not need to set tabindex for all the elements that you can click to make the element "focusable", the browser will do this by default, in order of appearance in the code. Use tabindex to force the flow of your navigation links if the default order doesn’t make sense to you, or if you want to make sure you have the corrected stream.

  1. I tested my site on the Opera mini-browser in Kemulator and found that it reloads the page when I click on the navigation, and some other layers are not displayed, for example. bootstrap modal pops up.

Does Opera Mini browser not support javascript?

Not. Like modern CSS. Opera Mini reduces interactivity due to its nature of using proxies to compress page resources.

Opera Mini is more popular in Africa, the Middle East and Eastern Europe. If this region is not your user, I would advise you not to waste time making the site fully run on Opera Mini.

+5
source

What is the market share of contactless mobile browsers? How many percent of users use these browsers?

It usually depends on the region, so it depends on your audience. You can get an idea from

https://deviceatlas.com/device-data/explorer/webusage-by-country/traffic/mobile/country/us/type/browser_name

http://gs.statcounter.com/#all-as-ww-monthly-201610-201612-map

But in my experience this is not very useful, because a lot is determined by the type of client that your product focuses on if it is not a very widely adapted product, for example. On a niche e-commerce site that sells valuables, you'll see Safari. Therefore, before solving the problem, if you can collect some data (if you have an existing product) or ask fb forums / groups to people who have a product in a similar domain, this will help you determine priorities, because construction is less problem than supporting it.

I made my entire site with a bootstrap suggesting touch functionality for small screen devices. Does modern html css methods use the best recommendations on creating a website for mobile devices with a touch screen only? Editing: while listening to suggestions that I decided to optimize for mobile devices without touching. But I'm not sure how they mimic the behavior of the mouse in general. I assume that elements that are focusable can be selected and clicked. Thus,

If you want to reach a wide range of browsers, use https://modernizr.com to discover features and respond accordingly or have backup interactions. Caution, it is always not recommended to drag the library if you want only a few functions, so see your use cases. On the other hand, the advantage is that it is constantly updated.

You can see a list of touch events (and the like) that are triggered by different browsers here http://www.quirksmode.org/mobile/tableTouch.html#link1

For a list of non-Apple touch events check this out https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events

Similarly, you will have to dig up the event lists for the browsers you want to support.

Should I do all of my elements that work with hovering, for example? focusable navigation using tabindex = "1"?

For tabindex, what Andre suggested is right (to have the correct order for important elements, which should be done at the testing stage).

Check this to see when to avoid it and when it can create a problem. There are more than the ones listed here, so do a good research if you play too much with tabindex.

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

I tested my site on the Opera mini-browser in Kemulator and found that it reloads the page when I click on the navigation, and some other layers are not displayed, for example. bootstrap modal pops up.

Does Opera Mini browser not support javascript?

In most cases, Opera Mini processing is done through Opera servers, which often prevents JS from working properly.

These are workarounds for some features for which you can refer to https://operamini.tips/#/

All that I said, still suggest, do a good study of the target users, and from there prioritize your support list for your initial versions. It may take an investment of time and possibly money, but it's worth it. Then improve the list in the list until you can remove the main mistakes, and when you have the bandwidth, then attack the next part of the list. Having an approach that supports too many browsers / devices / screens will first lead you to a “maze of support” where you will be stuck with error removal everywhere, and the development of functions will be out of focus.

Also integrate GA analytics (or any other) and attach events to the main interactions and continue monitoring according to screen sizes, device and browsers. for example, Opera Mini gives me 0 events on some pages and is alarming. Sometimes this may not be 0, but a low ratio of users who interacted / visited users. You can attach events by scrolling, selecting a field, etc. Priority is first on the main functions of your product, track, the choice of what you need to focus on, improve, check, and then go to the next part. Thus, basically it will create a matrix of functions with browser / screen sizes, and then assign priority accordingly depending on your type of traffic.

+1
source

You can use the code from detectmobilebrowsers. Just replace the url http://www.detectmobilebrowsers.com/mobile URL for the mobile web page. This is a direct link to javascript code. Just change the file extension to js and everything will work.

0
source

Source: https://habr.com/ru/post/1013752/


All Articles