www.rakuten.co.jp - Desktop site instead of mobile site

karlcow commented 9 years ago

URL: http://www.rakuten.co.jp/ Browser / Version: Firefox 39.0 Operating System: Android Problem type: Desktop site instead of mobile site

Steps to Reproduce 1) Navigate to: http://www.rakuten.co.jp/

Expected Behavior: Receive the mobile version

Actual Behavior: Receiving the desktop version. This is not happening all the time. Firefox Android users sometimes get the mobile version, sometimes the desktop version. See also https://bugzilla.mozilla.org/show_bug.cgi?id=958411

country: jp

miketaylr commented 9 years ago

They seem to be doing server side detection, probably using a device detection framework.

mtaylor at omg in ~/dev/compat/addons/baloney on master
🐓 http http://www.rakuten.co.jp/ User-Agent:"$IOS" | grep format-detection
<meta content="telephone=no" name="format-detection">
mtaylor at omg in ~/dev/compat/addons/baloney on master
🐓 http http://www.rakuten.co.jp/ User-Agent:"$FFA" | grep format-detection
(no result)

IE Mobile and Chrome Mobile also get the mobile optimized site.

hallvors commented 9 years ago

Straightforward server-side browser sniffing: Compare the content-length of the responses to these HTTP requests

GET http://www.rakuten.co.jp/ HTTP/1.1 Host: www.rakuten.co.jp User-Agent: Mozilla/5.0 (Android; Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

HTTP/1.1 200 OK Content-Type: text/html; charset=EUC-JP Vary: User-Agent Content-Length: 307333

GET http://www.rakuten.co.jp/ HTTP/1.1 Host: www.rakuten.co.jp User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A405 Safari/8536.25

HTTP/1.1 200 OK Content-Type: text/html; charset=EUC-JP Content-Length: 172338 Vary: User-Agent

karlcow commented 9 years ago

We might be able to get a contact through W3C representative. Rakuten became a member of W3C a little while ago.

kudodo commented 9 years ago

Mozilla Japan has a contact. Tomoya or other guy will contact them. Also Discuss about #916 to them.

karlcow commented 9 years ago

@kudodo Has rakuten been contacted?

kudodo commented 9 years ago

Yes, @chikoski is discussing with Rakuten. They know the problem, therefore showing desktop site now. Still under negotiation for fixing the issues.

karlcow commented 9 years ago

thanks :+1: switching to sitewait.

karlcow commented 8 years ago

This is not fixed. User agent override candidate.

karlcow commented 8 years ago

For documenting.

Firefox android + Chrome UA without webkit pref.

capture d ecran 2016-05-25 a 13 04 43

Firefox android + Chrome UA WITH webkit pref.

capture d ecran 2016-05-25 a 13 06 26

Chrome Android UA on Blink

capture d ecran 2016-05-25 a 13 07 20

Still a couple of glitches. for this part.

screen shot 2016-05-25 at 13 11 16

karlcow commented 8 years ago

Ah this too. screen shot 2016-05-25 at 13 15 30

aka

<div id="search">
<ul id="searchUpper">
            <li id="searchInput" class="sggstInputWrap">
                <span style="display:block;position:relative;"><input value="" name="sitem" size="40" class="searchInput clearValueButton" id="sitem" placeholder="キーワードから探す" autocomplete="" maxlength="2048" type="text"><div style="position: absolute; height: 36px; width: 36px; top: 0px; right: 0px; cursor: pointer; z-index: 9999; display: none;" id="clearVal"><img src="http://a.ichiba.jp.rakuten-static.com/com/img/home/iphone/top/btn.gif" style="position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-10px;right:5px;"></div></span>
            <span class="delval" style="height: 30px; display: none;"></span></li>
        </ul>
<div class="boxPCAC" id="searchLower">
<div class="select" id="searchSelect">
<select name="g" class="searchOption" id="foo1">
<option value="0" selected="">ジャンルで絞り込む</option>
<!-- cut  the options -->
</select>
</div>
            <div id="searchBtnBox">
            <input value="検索" name="sp_and_search" id="searchBtn" type="submit"></div>
</div>
</div>

CSS is

#searchLower {
    display: -webkit-box;
    display: box;
    -webkit-box-pack: justify;
    box-pack: justify;
}

.boxPCAC {
    display: -webkit-box !important;
    display: box !important;
    -webkit-box-pack: center !important;
    box-pack: center !important;
    -webkit-box-align: center !important;
    box-align: center !important;
}

capture d ecran 2016-05-25 a 13 18 07

If I add display: flex !important; it fixes it.

.boxPCAC {
    display: -webkit-box !important;
    display: box !important;
    -webkit-box-pack: center !important;
    box-pack: center !important;
    -webkit-box-align: center !important;
    box-align: center !important;
    display: flex !important;
}

It would probably requires too

#search select.searchOption {
    font-size: 12px;
    height: 30px;
    appearance: none;
    -moz-appearance: none;
}
``

karlcow commented 8 years ago

@dholbert I wonder if it's part of https://bugzilla.mozilla.org/show_bug.cgi?id=1208635