to solve the touch to achieve hovering operation
With the touch technology and Windows 8, driven by more and more PCs nowadays equipped with touch screen, to the traditional PC field A new interactive experience —— touch operation. But there is a slightly embarrassing problem: In addition to the Windows 8 applications optimized for touch operations, a lot of traditional operations are based on keyboards and mice, such as our most common Internet access. Almost all of today's websites only consider mouse and keyboard operations, which can lead to operational obstacles when using touch to access websites. Starting from the website, re-creating a web page that is compatible with touch operations is the most thorough solution, but it is more difficult to implement because the number of websites is so much. Another solution is to start with the browser and improve the browser to solve the touch operation problem during the Internet. This method is relatively easy to implement, as long as the browser developer can work hard.
As Internet Explorer 11, which will be released with Windows 8.1, it further enhances support for touch operations and is more convenient when accessing web pages. So what improvements have IE11 made? Let's take a look at it. . .
Simulation mouse hover operation
At present, many websites have the function of “hovering expansion”, such as major e-commerce websites, which are basically used in the commodity classification block. This kind of product classification will not appear too messy and too bloated, and users will find it easy to find the goods they need.
The most common web hover expansion operation
But this common hover operation, want to achieve recognition problems through touch operations. Because the mouse has a pointer, the webpage can realize the hovering and unfolding operation as long as the pointer is detected, and the touch operation does not have the pointer. If the finger is directly put on, the webpage will only be recognized as “click”. Some people may think of the way to "hold", but the reality is: "press" will be recognized as “open right context context menu instead of hover.
IE11 has made improvements to this problem, so that “press “ can also achieve hover operation, while retaining the original "hold down" operation of the right-click menu function. When accessing the above webpage in IE11, press and hold ” to expand the secondary menu. At the same time, if the location of “press "" itself contains "click & rdquo; operations (such as with hyperlinks), then at the bottom of the screen will be additionally displayed & ldquo; right context menu command bar & rdquo; (new window open, copy link Wait for the order).
Operate hover menu on several different websites through touch operation
Other touch operation improvements
Improve link highlighting
Open with touch when there are more links on the webpage A link needs to be prevented from being wrong. If there is a more obvious feedback prompt during the "click" process to help the user confirm the clicked link in real time, the touch operation will undoubtedly be more accurate.
IE11 has now added a feedback prompt. When the user clicks on the link by touch, the gray background is briefly displayed around the link text, highlighting the object that the user clicked.
Link highlighting effect comparison
Swipe left and right to implement backward and forward operations
In the process of browsing the webpage, IE11 (including IE10) will actively hide all the function bars to display the webpage in full screen mode. In this case, the user will often use the "backward" operation to take extra steps, first call out the address bar, then click the back button. Frequent use of mobile Internet access should know that many mobile browsers support gesture operations to achieve backward and forward, Windows 8 is no exception. From IE10, when the user browses the webpage, the user directly swipes to the right on the screen to return to the previous page, and swiping to the left is forward.
Sweeping left and right gestures to move forward and backward
IE11 inherits this gesture and further improves user experience and operational efficiency. When a user switches between different pages, IE11 suspends the previous page and caches it in memory. Once the user swipes back to the previous page, the page will be restored from memory instead of being reloaded. The result of this is that the previous page is loaded in an instant. In addition, when rewinding or advancing, IE11 will display a screenshot of the web page when the page is loaded, so that the user can quickly find the desired content when the page is reached.
Touch to achieve HTML5 drag and drop operation
Maybe HTML5 has a lot to go from large-scale applications, but it is the future trend. IE11 is of course supporting HTML5, and it is the first browser to support HTML5 drag and drop functionality through touch. In IE11, users only need to press and hold to achieve.
In Microsoft's Magnetic Poetry test demonstration, IE10 can use the mouse to implement HTML5 drag and drop operation. Now we can use IE11 to open this demo to experience the touch and HTML5 drag and drop operation.
Magnetic Poetry Demo Page
Access: Magnetic Poetry
Improve Touch API for Implementing Pointer Events
Pointer Event is a set of standards developed by Microsoft and other browser vendors and W3C This standard is based on the API with vendor prefix introduced by IE10. This API enables websites to support different touch devices including mouse, stylus, multi-touch. IE11 will introduce the updated MSPointer API, and the final official version will support pointer events without prefixes.
Remarks: Some technical description texts and videos in the text are quoted from Microsoft's official blog.