Is there a specific "Home screen" or "app mode" user-agent string for Safari on IOS? I noticed that there is a bug on IOS8 that makes the browser window appear in the wrong position. Notably the time and battery info on the iPad will be visible over the webpage and a black border will appear at the bottom. I'm guessing that the panel that used to be at the top on IOS7 was removed out of some reason and this was not tested accurately.
I would like to be able to work around these kinds of issues in the future so therefore it would be nice with a specific "App mode" user agent that could be used to fix bugs temporarily. Is there such a user-agent string or am I left in without workaround options?
I noticed this only occurs if the webpage is in "full screen" For instance the problem does not show up on stack overflow but it does on Slashdot.
Please don't sniff the user agent. A better way is to check the 'navigator.standalone' property. This will be 'true' when your web app is launched from the home screen.
I'm not sure why there's a black bar at the bottom here (that's definitely a bug), but in the future your content should be prepared to deal with the status bar, just like native apps do.
Here is 2 of user-agent strings using IOS 8:
Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/538.34.9 (KHTML, like Gecko) Mobile/12A4265u
Mozilla/5.0 (iPad; CPU OS 8_0 like Mac OS X) AppleWebKit/538.34.9 (KHTML, like Gecko) Mobile/12A4265u
hope it helps.
iPad and iPhone do not show "Safari" in their user-agent string when in HomeScreen mode.
Example of iPhone (viewing page in Browser) :
Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1
And the same phone (viewing the same page in WebApp) :
Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13F69
Related
Since yesterday version (version 90.0.4430.72 ) I can't enter a time with keyboard. I have to click on the icon clock and select hours and minutes from the dropdown which is not very easy. Any ideas?
This appears to be a Chrome bug. I am having the same issue so I opened a bug report with Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1199352:
Issue 1199352: Focusing <input type="time"> does not highlight hours
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36
Steps to reproduce the problem:
1.Click on an input of type "time"
What is the expected behavior?
The input should focus and highlight the hours
What went wrong?
The input focuses but the hours text is not highlighted
Did this work before? Yes 89.0.4389.114
It was subsequently confirmed:
Able to reproduce the issue on windows 10, Linux and Mac 10.11.2 using chrome version 90.0.4430.72.Input focuses but the hours text is not highlighted
Please find the bisect information as below.
It was subsequently fixed and merged into Chrome 90 and 91
The main issue has been fixed in M90 and M91, thanks everyone for the help.
(I am aware that there are similar threads such as this and this 3 years ago.
I tried their comments, but it did not work, so I re-ask the question, maybe there are changes during 3 years...)
I use Mac OS X El Capitan 10.11.4 and Chrome Version 50.0.2661.102 (64-bit). I start to use Chrome DevTools, and I dock it into separate window from Chrome web browser.
As a result, the DevTools and the web browser are considered 2 windows belonging to the same application (ie, Chrome). cmd` can be used to switch from the Chrome browser to the DevTools.
However, same as the old threads mentioned, cmd` can not switch back from the DevTools to the web browser.
I have tried the comment of Hugh Lee or TMB, however fnF6, cmdL, or ctrlL on the DevTools does not lead me to the address bar of web browser. Additionally, typing javascript: in the address bar of web browser returns nothing. Maybe they meant the address bar for DevTools, does it exist?
Does anyone know how to make the above hack works, or have a solution for the general problem?
I just ran some random tests on my code and was shocked to discover that get_browser() read Opera as Google Chrome.
A few months ago get_browser() gave me correct results on all 5 browsers (chrome,ie,ff,opera,safari).
Today Opera displayed the same values with Google Chrome. First I thought get_browser() must be the problem so I tried getting alternatives. I saw this javascript alternative which works BUT like get_browser it also detected Opera as Google Chrome.
I made a quick search on this and found articles of Opera now using Chromium for its Desktop Browser.
Is that why my code is giving Opera and Google Chrome the same values?
I store user information for better user experience and it looks bad when my users are being told the wrong information.
Any ideas on how to keep individuality between Google Chrome and Opera?
All I can think of is using the user-agent but it can be faked.
Opera is now using Chromium/Blink as its basis. In order to solve compatibility issues, they purposely use Chrome's user-agent. Below is an example of UA string presented by Opera:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36 OPR/15.0.1147.100
However, differentiation of Opera and Chrome is still possible as Opera appends its version to the user-agent as you can see above.
If you want to keep using get_browser() function of PHP, you should wait for a later release of PHP that implements detection of Opera natively. However, you can also write a function to do that job. In fact, get_browser() works by decoding the user-agent field of the headers of a HTTP request.
I am attempting to use a background image as a sprite, on elements with variable dimensions. I am therefore using percentage based values for background-size and background-position.
I have encountered a problem with this in Opera (latest version, 12.14). I suspect it is the combination of background-position and background-size with percentage based values which is causing the misbehaviour. I have searched in vain for any relevant information, or an acknowledged issue.
To demonstrate the issue I am facing, I have created an image that is 560 by 560 pixels, primarily orange, except for a blue square in the bottom right hand corner, measuring 112 by 112 pixels, one-fifth of the size of the image.
To apply this image as a background to an element such that the blue square completely and exactly covers it, regardless of the dimensions of the element, I have used the following style:
.square
{
background-size: 500% 500%;
background-position: -400% -400%;
}
This works perfectly in all browsers but Opera, which shows some orange around the right and bottom edges of the element. I surmise that these orange slices are the repeated background image, as though Opera has offset the image further than it should.
I have created a jsfiddle test that demonstrates the issue, which you may view in Opera to see the undesirable behaviour I have described.
Details about Opera, taken from the top of opera:about:
Version information
Version: 12.14
Build: 1738
Platform: Win32
System: Windows 7
Browser identification
Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14
I have been able to assemble some information which may provide some clues:
The larger the image and the further it is offset (ie. the larger the values for background-position), the further Opera gets it wrong.
Opera renders correctly if the element is exactly the size of the blue square (112 by 112 pixels in this case - you can see that in the jsfiddle).
Opera renders correctly if (brace yourself) the image dimensions are a multiple of 100 (ie. 500 by 500 pixels, instead of 560 by 560 pixels).
At the moment, I am guessing this is a fault in Opera, as it works as desired in all other browsers. My questions are:
Is this a fair assumption, or perhaps even a known issue? Is Opera violating relevant specifications?
Is there a fix or workaround, other than to re-render the image to dimensions that are multiples of 100?
I reported this behaviour to Opera as a "bug" some months ago, and I just re-tested this in the latest version of opera (17.0), and it is working as desired, so I will assume that the answers to my questions are as follows:
Yes, it is a fair assumption. Yes, it was violating some specifications.
Yes, you can update to the latest version of Opera, which behaves as desired.
For reference, the details about the Opera I just used to test, taken, again, from the top of opera://about:
Opera 17.0
Made to discover
Version information
Version: 17.0.1241.45 - Checking for updates...
Update stream: Stable
System: Windows 7 64-bit (WoW64)
Browser identification
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45
I have the exact same version of Google Chrome (22.0.1229.94) on both my Mac (OSX 10.8.2) and my PC (Windows XP SP2) but my input buttons are being rendered slightly differently (the pc version is moved down slightly).
Here is shot of my devtools
Mac Version
PC Version
Obviously not a huge difference but enough to make it stand out. Any obvious flaws in my code?
I didn't realize that my font sizes were different. That seems to be the issue.