How can I address the Samsung Android browser?

问题

I'm working on a responsive website and I have a weird CSS/JS issue with the default touchwiz browser of Android Samsung devices. I've searched on StackOverflow, finding some unhelpful answers like this.

I have the physical devices to test on, but since it's not possible to do remote debugging on these browsers it's really time consuming to make changes, deploy them a QA server, test, and retry.

Any idea on how can I speed up my testing or targeting that specific browsers?

Useragent is not helping in my case...

Just to make an example: one of the many problems I'm facing is on this free component, it's not positioning in the middle of the screen, while it's ok on all other android and iOS browsers.

回答1:

For mobile testing, here are some resources might help.

Personally I prefer the Samsung emulator and Adobe Edge Inspect(will charge).

Adobe Edge Inspect
Samsung Emulators
Chrome - Device Mode & Mobile Emulation (recommended only for testing responsiveness)
Keynote (might charge fee)

Because the limit of the content length, Please click the links and see the detailed documentation.

Hope it will help to speed up the testing and debug on mobile devices.

回答2:

If you have a device I would suggest you to try this tool weinre It's allow you to remote debug. I always use it for stuff like that

回答3:

JSBin can take care of the JS debug. Combined with the CSSRule API and the following to grab the browser's default style values for an element and its current rendered values, you might be able to get somewhere.

function defaultStyle(tag) {
    var defaultStyles = {},
    testElem = document.createElement(tag),
    getStyle = 'getComputedStyle' in window,
    styles;

    document.body.appendChild(testElem);

    styles = (getStyle) ? window.getComputedStyle(testElem) : testElem.currentStyle;

    for (var prop in styles) {
        if (!(/^\d+$/.test(prop))) {
            defaultStyles[prop] = styles[prop];
        }
    }

    document.body.removeChild(testElem);

    return defaultStyles;
}

function currentStyle(elem) {
    var currentStyles = {},
    getStyle = 'getComputedStyle' in window,
    styles;

    styles = (getStyle) ? window.getComputedStyle(elem) : elem.currentStyle;

    for (var prop in styles) {
        if (!(/^\d+$/.test(prop))) {
            currentStyles[prop] = styles[prop];
        }
    }

    document.body.removeChild(testElem);

    return currentStyles;
}

回答4:

Use media queries for making css based on screen lengths. It does not matter whether it is samsung or iphone browser. You can also use bootstrap libraries for it.

来源：https://stackoverflow.com/questions/27439198/how-can-i-address-the-samsung-android-browser

标签

javascript

android

css

samsung-mobile