u.njtech.edu.cn - Design is broken

[webcompat-bot]

URL: https://u.njtech.edu.cn/cas/login?service=https://u.njtech.edu.cn/oauth2/authorize?client_id=jc44q2c36nSCnrRjSIO5&response_type=code&scope=openid&s=9ef63cc9fef972d5e299723894e26a8e

Browser / Version: Firefox Mobile 64.0 Operating System: Android 7.1.2 Tested Another Browser: Yes

Problem type: Design is broken Description: Strange site display Steps to Reproduce: Nothing

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. The design is broken on Firefox but displays the correct mobile layout on Chrome.

Tested with: Browser / Version: Firefox Nightly 64.0a1 (2018-10-07) Operating System: Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation. This might be a duplicate of #1423013 @karlcow what do you think?

[karlcow]

when changing the UA string to be Chrome, we get the right design. This is about user agent sniffing. And it's probably client side. The server is sending the same number of bytes.

In the index page

<script>
    var browser = {
        versions : function() {
            var u = navigator.userAgent, app = navigator.appVersion;
            return { //移动终端浏览器版本信息 
                trident : u.indexOf('Trident') > -1, //IE内核 
                presto : u.indexOf('Presto') > -1, //opera内核 
                webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
                gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 
                mobile : !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
                ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
                android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 
                iPhone : u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 
                iPad : u.indexOf('iPad') > -1, //是否iPad 
                webApp : u.indexOf('Safari') == -1
            //是否web应该程序，没有头部与底部 
            };
        }(),
        language : (navigator.browserLanguage || navigator.language)
                .toLowerCase()
    };

    // 根据不同的终端，跳转到不同的地址 ; 
    if (browser.versions.mobile) {

        var desW = 750;
        var scale = document.documentElement.clientWidth / desW;
        $("[name='viewport']").attr(
                "content",
                "width=device-width,initial-scale=" + scale
                        + ",user-scalable=no");

        //document.getElementById("banner").style.display = 'none';
        //document.getElementById("bottom").style.display = 'none';
        document.getElementById("main").style.display = 'none';

        document.body.background = '#eefbff url(images/bgline.jpg) repeat-x top';
        document.getElementById("banner1").style.display = 'block';
        $('#login1 #username').focus();
    } else {
        $('#login #username').focus();
    }
</script>

[karlcow]

They need to adjust their UA string matching to be able to match strings like 'Mozilla/5.0 (Android 7.0.0; Mobile; rv:62.0) Gecko/62.0 Firefox/62.0'

[softvision-oana-arbuzov]

Site is unreachable.

[softvision-oana-arbuzov]

Currently the site loads on Chrome, but displays blank page on Firefox.

Tested with: Browser / Version: Firefox Nightly 200823 (🦎 81.0a1-20200820093209), Firefox Release 79.0.5 (🦎 79.0.1-20200813192915) Operating System: Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)

[softvision-oana-arbuzov]

This is still an issue.

Tested with: Browser / Version: Firefox Nightly 105.0a1 (🦎 105.0a1-20220727155540) Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

[inv_30/2022]