I'm looking at this question: How to detect Desktop vs. Mobile vs. GearVR vs. Oculus Rift vs. Vive in A-Frame?
It seems that AFRAME.utils.device.isMobile() is seeing the Go as a mobile device.
The check will ship in A-Frame 0.9.0 (as one of the comments mentioned). In the meantime you can incorporate the code to your application:
function isOculusGo () {
return /Pacific Build.+OculusBrowser.+SamsungBrowser.+MobileVR/i.test(window.navigator.userAgent);
}
This checks relies on the specific navigator.userAgent strings of the browsers available on Go (Oculus Browser and Samsung Internet). It's not super robust but the only known way to do it at the moment. Mozilla Firefox Reality has just been released and the expression above does not take it into consideration. I don't have a Go available to access the userAgent.
Related
A-Frame by default provides the "enter VR" button at the bottom right of the screen. This is working fine on my desktop, and also in Firefox Reality on my Oculus Quest. But in Wolvic, instead of opening in the VR mode, I see 2 views/screens.
I got the same behaviour for several examples on glitch.com, this is 1 example: https://glitch.com/~aframe-vaporwave
Any idea what's causing this and/or how to fix this?
The example you pointed out uses a very old version of A-Frame (0.5.0) based on the old WebVR API that browsers no longer ship. Make sure you're using 1.3.0 or newer that comes with WebXR support.
All the A-Frame examples should work on Wolvic:
https://aframe.io/aframe/examples/
Can also use the official glitch A-Frame support as starting point:
https://glitch.com/~aframe
Does anyone know of a cheap alternative to Oculus Rift / Vive that has controls and is browser / A-Frame compatible?
Oculus Rift, HTC Vive and WMR headsets are all valid options for desktop.
And you're not stuck with Edge if you want WMR - you can use Windows MR headsets as SteamVR devices via an official Microsoft SteamVR plugin (but Edge with Windows Mixed Reality is quite good, really).
You did not specify if you want 6DOF. If 3DOF is enough, there's also mobile - GearVR works very well and has a controller, Daydream isn't that bad too. If you're really desperate there's also cardboard with which you can use a bluetooth gamepad or something.
I'm maintaining 360WebPlayer and I have an up to date list of supported browser/device combinations. It's not using A-Frame, but the list should be close.
Unfortunately, on Desktop the only headsets that browsers support are Oculus Rift and HTC Vive on Firefox / Chrome / Supermedium and Windows Mixed Reality headsets on Microsoft Edge.
Mobile headsets only support a single 3DOF controller at the moment. Your options are Samsung Internet and Oculus Browser for Gear VR and Oculus Go and Chrome for Daydream headsets.
Check Web VR Rocks periodically for an up to date compatibility table.
You'd think just "webkit", but the screenshots it shows me (and the issues it finds) are quite different to anything that I've seen via devtools device testing or using actual devices.
Is it maybe just an outdated version of webkit?
Without knowing what they're using it's hard to know how to fix the issues, and I feel they'll negatively affect my search index rankings if I don't.
tl;dr:
1- You are right, it is webkit, however, it is a pretty much A stripped down version of Chrome for Android
2- What you see is the default android browser, you can use
Can I Use
and look at "Android Browser" to see whether or not your design is supported by the "mobile view" in PageSpeed
Long Version:
my understanding is this:
1- The view-port you see in PageSpeed represents what a person using the default browser in Android phones would see.
2- The Default Android browser - AKA "WebView" -
is based on the same code as Chrome for Android version
However,
WebView does not have full feature parity with Chrome for Android
Source: Google
I am studying CSS3 and HTML5 and trying to develop a simple homepage. Since I have only Mac interface in my house so I couldn't check any differences on windows.
But one day, one of my acquaintances told me that there is a pixel difference between browsers which I didn't know at all. Then I checked my page and it appeared to be wrong.
Even though it was same resolution as I set, Chrome on Mac showed me an appropriate position of several buttons but Chrome on Windows didn't.
Their position was quite different and ruined the design. How can I fix this problem? or is it normal?
Thanks.
Developing a site that is the same on every combination of operating system and browser is no easy task. It has personally added many hours to my development time trying to fix the issues.
There are several tools out there that try to help you with this task, such as Cross Browser Testing. Or you can manually test it by installing the browsers on your machine. It is also common to use virtual machines to test your website on other platforms. VMware is popular.
Using cross browser libraries can also aid in this. Such as jQuery, which is very popular. This page lists more information on the subject, in general.
Difference is not in Chrome, but difference is in Mac and Windows.
Here, you can detect the userAgent and add the appropriate class to the body tag (with jQuery):
jQuery(document).ready(function(){
if(navigator.userAgent.indexOf('Mac') > 0){
jQuery('body').addClass('mac-os');
} else {
jQuery("body").addClass("pc");
}
});
After detecting userAgent, you can write css specially for Mac and Window and their browsers too.
In 2018 chrome and firefox behave differently depending on the operating system. I built a site recently, and on latest chrome and firefox versions one page was rendering OK in windows, while on macOS and ubuntu, it had a small glitch. The elements that are supposed to be inline were displaying horizontally in certain states.
Back in the past,
i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...
So is there any webpage or application where i can see how my webpage looks like in different resolution?
And here are the resolutions i would like to check for..
1. 1024x768 24.56%
2. 1280x800 22.06%
3. 1280x1024 13.42%
4. 1366x768 7.10%
5. 1440x900 6.68%
Perhaps you're thinking of http://browsershots.org/ ?
Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.
It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.
If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.
For viewing which percentage of people sees how much of your web page:
http://browsersize.googlelabs.com/
Also: Web Developer plugin for Firefox (Resize menu).
Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...
There is one more online tool called ScreenFly which is very good and you can even check for tablets, TVs, mobiles.. screenfly
There are many utils available for watching your website in different resolutions.
Some are installed on PC, some are online services like these:
Adobes "render browser" - you'll need to create a free Adobe account:
http://browserlab.adobe.com
Nice, but not free if you want it fast as I recall it:
http://browsershots.org/
Google - shows what part of your website is visible based on statistics from Google:
http://browsersize.googlelabs.com/
But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.
If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.
You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.
Regarding your question, the % you list, seems like you would have most use of the "Google" link above.
Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:
Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)
Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)
Google Chrome (awesome debugging tools too, and a very stable browser)
Safari (so you make sure that you support MacOSX)
Thats my opinion.
The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.