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
Related
I'm using Flowplayer6 / HTML5 wordpress plugin to play videos on the site.
I have trouble playing the player on the phone. By clicking on the player, the video does not run .
Please find an online example of the problem below:
http://www.muzika.com.br/vertice/player_portacurtas/filme/?name=j_carlos_o_cronista_do_rio
obs .: the 5/2 is normal to stop the video.
According to the know issues section in flowplayer documentation, it seems that:
Mobile devices and iOS do not support automatic playback on page load.
Volume and mute state cannot be controlled on mobile platforms and
iOS.
Mobile phones and iPod do not allow inline playback in the
browser. The native player component takes over entirely. They
therefore also do not fully support the JavaScript API, especially
when it comes to interaction with the page.
You will find in the documentation some workarounds, but maybe this is not the right plugin for what you need.
Due to Bootstrap upgrade, there has been lots of changes in the CSS in all pages of the web application that I'm working on. This application is also mobile optimized. So I have the task the checking the UI of all pages of our application accross most browsers - IE8,9,10,11 , chrome, firefox, ios and android devices(phone, 7 inch, 10 inch).
Right now, I'm opening the existing version(old bootstrap) and the updated version(New bootstrap) of my website in 2 tabs, and switch back and forth between them to find out any UI issues like alignment and color change and text size.
Is there a better way of doing this?
Yes there are somewhat solutions to it, which make cross-browser and multiple device testing easy. Some of them are:
Ghostlab: allows synchronized testing which means if you click or scroll in one browser it happens across all browsers. It has many other features but is only for Mac.
Grunt also allows for synchronized testing. Check this article
you can do cross browser testing within a browser using online services such as
Last thing I would mention is xip.io just check it out!!!
Chrome DevTools are awesome for this purpose. They allow you to override settings for different devices by Developer Tool>Settings>Overrides you can override following to emulate
User agents
Device metrics
Device orientation
Touch events
CSS media
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.
It seems that it is not possible, but if anyone as a hint on how to create a right-sided sidebar (like a iframe) in google chrome, any hint will help. Thanks.
The experimental sidebar API has, as of this time, disappeared from the chrome documentation, since there is no longer a developer working on it.
Your best bet for something that you can achieve now is a DOM bar, as discussed in Creating a StumbleUpon-like toolbar for Chrome
If you mean something like that
This is from the google chrome experimental api:
Caution: Don't depend on these
experimental APIs. They might
disappear, and they will change. Also,
the Chrome Developer Dashboard doesn't
allow you to upload extensions that
use experimental APIs.
Details: http://www.chromium.org/chromium-os/user-experience/panels
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.