1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Chrome developer tools giving different dimensions for the same mobile emulator

Discussion in 'HTML & Website Design' started by sarahk, Mar 8, 2019.

  1. #1
    I'm adding a page to a mobile app. The site is responsive but when this particular page goes through I'm using a layout that doesn't include headers and footers but all the stylesheets, js are the same. That's the easy bit.

    When I view the pages in chrome they look really different.

    My app version:
    upload_2019-3-9_18-58-37.png

    My responsive version:
    upload_2019-3-9_18-59-22.png

    When I look at the computed styles for the <body> tag I get this
    SEMrush
    app: upload_2019-3-9_19-1-13.png responsive: upload_2019-3-9_19-0-50.png

    So my first big problem to solve is why does Chrome think the same phone setting is such a different size?
    Is that a bug in Chrome? (edit: ugh, looks like it's Chrome. Firefox is playing nicely)
    Something shonky in my code?
     
    Solved! View solution.
    Last edited: Mar 8, 2019
    sarahk, Mar 8, 2019 IP
    SEMrush
  2. RomanEpo

    RomanEpo Active Member

    Messages:
    126
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Seems that its code issue.
     
    RomanEpo, Mar 9, 2019 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,443
    Likes Received:
    355
    Best Answers:
    28
    Trophy Points:
    335
    #3
    Maybe I'm being slow-witted, it is the weekend after all, but the computed values you show are in the ranges I'd expect. In Firefox's responsive mode, it won't give you actual values for the generated 'page' views. If you drag the width, you will get actual values.

    I can't test Chrome because 1) I really don't like its UI, and 2) I've removed it from my system because it was hi-jacking some of my settings. I don't like impolite apps or OSes.

    That said, am I even on topic?

    gary
     
    kk5st, Mar 9, 2019 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    24,749
    Likes Received:
    3,356
    Best Answers:
    97
    Trophy Points:
    615
    #4
    @kk5st I'd expected the emulator to show the same dimensions for the same page on the same "phone"
     
    sarahk, Mar 9, 2019 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,443
    Likes Received:
    355
    Best Answers:
    28
    Trophy Points:
    335
    #5
    Do, you mean you expect the FF responsive views to match Chrome's? Not likely in this world. IMO they're good only for for quick ballpark checks. To really see if you've set your breakpoints correctly, you need to drag the width of your viewport to representative values or dig up a shitpot full of actual phones. And, you need to do it for each and every layout template you use on the site.

    g
     
    kk5st, Mar 9, 2019 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,702
    Likes Received:
    1,567
    Best Answers:
    227
    Trophy Points:
    515
    #6
    I'd have to see the code, but I suspect the question itself is flawed... Though I'm not even sure I understand what you mean here by "app" and "responsive", why you would care how many pixels is reported, or a host of other terminology that appears to be mis-used or out of context.

    Given the plethora of different device sizes, the mere notion of thinking "specific sizes" is broken nonsense, as is most 'testing' by device name/resolution. There is a reason I favor making my responsive layout triggers in EM, based on the needs of the content, and not some pre-determined aribitrary resolution of any specific device.

    Are you working with your widths in EM like a good little doobie? Have you bought into the LIE that REM is ready for production deployment? Are your media queries ALSO in EM like they should be? What's your viewport META look like?

    As a mod you should already know, no code == "This is why we can't help you"

    That said, 99% of the time if FF is playing nice and Chrome isn't, you've done something wrong like design for FF using broken methodologies.
     
    deathshadow, Mar 10, 2019 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    24,749
    Likes Received:
    3,356
    Best Answers:
    97
    Trophy Points:
    615
    #7
    I'm using someone else's design but I am converting px to em as I go.

    I could see that the emulator was showing the correct layout for the size it was detecting, but that it was wrong about the size. Initially I'd thought the css was wrong but when I viewed the developer tools I realised the css was ok and that it was the emulator that was broken.
    upload_2019-3-11_9-8-53.png

    Happy to send the links in a convo tho.
     
    sarahk, Mar 10, 2019 IP
  8. #8
    Uhm, in the links you sent via PM, the "Btio" one has no viewport META. The one that's just the numbered link does.

    That can make a huge difference across browsers depending on how they emulate mobile. I know FF pretty much doesn't give a flying purple fish, but Chrome will obey it... or not obey it as the case may be.

    Of course that it's the typical fat bloated train wreck laundry list of how NOT to use HTML or CSS that's bootcrap can hardly be a surprise. First thing I'd do is throw that entire mess in the trash and start over without that mentally enfeebled halfwitted incompetent BS. It's like "well no wonder you have problems" what with the endless pointless DIV for nothing, endless pointless classes for nothing, presentational use of classes, pointless display:none on hidden inputs (whiskey tango foxtrot), unassociated labels, label around things that aren't labels... I'd almost accuse it of using tables for layout, if not for what being presented making sense as tabular data to a small degree, but even so this:

    
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">I wish to renew as:</div>
                <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
                    <table class="table table-condensed table-bordered" cellpadding="5" id='tMtypes'>
                        <tbody>
                            <tr><th></th>
                                <th></th>
                                <th>Annual Fee</th>
                            </tr>
                            <tr class='assoc21' id='mtype_189'><td><input type='radio' id='mtype_id_189' name='mtype_id' value='189' ></td><td><label>Individual</label></td><td style='text-align: right;'><label>$&nbsp;999.00</label><div id='newfee189' class='supplementary' style='display:none'></div></td></tr><tr class='assoc21' id='mtype_190'><td><input type='radio' id='mtype_id_190' name='mtype_id' value='190' checked='checked'></td><td><label>Couple</label></td><td style='text-align: right;'><label>$&nbsp;1,099.00</label><div id='newfee190' class='supplementary' style='display:none'></div></td></tr><tr class='assoc21' id='mtype_234'><td><input type='radio' id='mtype_id_234' name='mtype_id' value='234' ></td><td><label>Big Fee, No Card</label></td><td style='text-align: right;'><label>$&nbsp;2,000.00</label><div id='newfee234' class='supplementary' style='display:none'></div></td></tr>                    </tbody>
                    </table>
                </div>
            </div>
    
    Code (markup):
    Is an epic /FAIL/ at web development, doing the job of:

    
    <table class="fees">
    	<caption>I wish to renew as:</caption>
    	<thead>
    		<tr>
    			<th scope="col">Type</th>
    			<th scope="col">Annual Fee</th>
    		</tr>
    	</thead><tbody>
    		<tr>
    			<th scope="row">
    				<input type="radio" id="mtype_id_189" name="mtype_id" value="189">
    				<label for="mytpe_id_189">Individual</label>
    			</th>
    			<td>$ 999.00</td>
    		</tr><tr>
    			<th scope="row">
    				<input type="radio" id="mtype_id_190" name="mtype_id" value="190" checked>
    				<label for="mytype_id_190">Couple</label>
    			</th>
    			<td>$ 1,099.00</td>
    		</tr><tr>
    			<th scope="row">
    				<input type="radio" id="mtype_id_234" name="mtype_id" value="234">
    				<label for="mytype_id_234">Big Fee, No Card</label>
    			</th>
    			<td>$ 2,000.00</td>
    		</tr>
    	</tbody>
    </table>
    
    Code (markup):
    Aka half the flipping markup even after the addition of whitespace formatting and the missing attributes! But tell me again how bootcrap made everything so much simpler or faster to develop.

    There is nothing from that wreck I would ever allow a client to deploy. That "someone else" was unqualified to design but two things, and Jack left town.

    EVERY time I see idiocy like this:

     <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
    Code (markup):
    I want to jab red hot fire pokers in one ear and out the other to make the pain stop.

    Hence the ape-shit ridiculous 45k of HTML, 283k in 10 files of CSS, and 3.2 megabytes of scripttardery to deliver a 2k form with zero content images and nothing to actually warrant the presence of JavaScript.... so not even 32k in two (html+CSS) files TOTAL's job. An epic fail at web development, or as it's come to be known today "The norm".
     
    Last edited: Mar 10, 2019
    deathshadow, Mar 10, 2019 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    24,749
    Likes Received:
    3,356
    Best Answers:
    97
    Trophy Points:
    615
    #9
    lol, the javascript was out originally but added in while trying to suss this out. I'm with you all the way on bootstrap, the more I work with responsive the more frustrated I get with it. Unfortunately, this site was re-themed in '14 and there isn't the budget to do it again anytime soon. I work more hours for them than I can bill so I'm not about to throw them a freebie.

    It looks like the viewport was the issue, something I'd completely overlooked - thank you for spotting it!
     
    sarahk, Mar 10, 2019 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,702
    Likes Received:
    1,567
    Best Answers:
    227
    Trophy Points:
    515
    #10
    I actually forgot the exact same thing recently on one of my own examples of doing stuff for smaller displays -- happens to the best of us. It's really freaky how if you omit the viewport META mobile browsers (and some emulators) will go through and change ALL your font-sizes willy-nilly, WITHOUT even doing so in a consistent fashion! You can declare 16px or 1EM on two different sets of elements, and it will just go "whatever" and do what it wants.

    Why the non-viewport behavior is even a thing is beyond me -- it's not useful, even on sites not designed for mobile.
     
    deathshadow, Mar 10, 2019 IP