CODEWITHSUNDEEP
javascriptandroidcsssamsung-mobile
napolux
napolux

Reputation: 16094

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.

Upvotes: 8

Views: 2875

Answers (4)

Makaze
Makaze

Reputation: 1086

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;
}

Upvotes: 0

Ihor
Ihor

Reputation: 3809

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

Upvotes: 2

joydesigner
joydesigner

Reputation: 813

For mobile testing, here are some resources might help.

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

  1. Adobe Edge Inspect
  2. Samsung Emulators
  3. Chrome - Device Mode & Mobile Emulation (recommended only for testing responsiveness)
  4. 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.

Upvotes: 2

yogihosting
yogihosting

Reputation: 6332

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.

Upvotes: -4

Related Questions