Chrome Dev Tool vs. Real Mobile Phone

Hi guys,

I’m struggling with a weird behavior.
On Chrome Dev Tools my buttons are displayed properly like in the image below:

But when I deploy my portfolio and test it on my iPhone here’s what happens:

I’ve tried it on Google Chrome, Safari and Firefox on my iPhone, and yes, all of them are up to date with the latest version.

And this is the code for the Component that handle the mobile navbar:

import React from "react";

import styled from "styled-components";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { faCode } from "@fortawesome/free-solid-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
import { faIdCardAlt } from "@fortawesome/free-solid-svg-icons";
import { faTools } from "@fortawesome/free-solid-svg-icons";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

const MainButtonDiv = styled.div`
  margin-top: 1em;
  position: fixed;
  top: 0;
  right: 10px;
  z-index: 1;

  @media screen and (min-width: 568px) {
    margin-top: 0.5em;
  }

  @media screen and (min-width: 667px) {
    margin-top: 1em;
  }
`;

const Button = styled.button`
  display: block;
  font-size: 1.5em;
  border-radius: 25px;
  border: 0;
  background-color: hsl(0, 0%, 20%);
  color: white;
  width: 50px;
  height: 50px;

  &:focus {
    outline: 0;
  }
`;

const LinkButtonsDiv = styled.div`
  margin-top: 5em;
  position: fixed;
  right: 10px;
  z-index: 1;

  @media screen and (min-width: 568px) {
    margin-top: 3.7em;
  }

  @media screen and (min-width: 667px) {
    margin-top: 4.5em;
  }
`;

const LinkButton = styled.button`
  text-decoration: none;
  font-size: 1.5em;
  border-radius: 25px;
  border: 0;
  background-color: hsl(0, 0%, 20%);
  color: white;
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;

  @media screen and (min-width: 568px) {
    margin-bottom: 0.1em;
  }

  @media screen and (min-width: 667px) {
    margin-bottom: 0.5em;
  }
`;

const StyledAnchor = styled.a`
  color: white;

  &:hover {
    color: hsl(94, 100%, 47%);
  }
`;

export default class MobileNav extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false,
    };

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState((prevState) => ({
      active: !prevState.active,
    }));
  }

  render() {
    return (
      <React.Fragment>
        <MainButtonDiv>
          <Button onClick={this.onClick}>
            <FontAwesomeIcon icon={this.state.active ? faTimes : faBars} />
          </Button>
        </MainButtonDiv>
        <LinkButtonsDiv>
          <LinkButton style={{ display: this.state.active ? "block" : "none" }}>
            <StyledAnchor href="#about">
              <FontAwesomeIcon icon={faHome} />
            </StyledAnchor>
          </LinkButton>
          <LinkButton style={{ display: this.state.active ? "block" : "none" }}>
            <StyledAnchor href="#pres">
              <FontAwesomeIcon icon={faIdCardAlt} />
            </StyledAnchor>
          </LinkButton>
          <LinkButton style={{ display: this.state.active ? "block" : "none" }}>
            <StyledAnchor href="#projects">
              <FontAwesomeIcon icon={faCode} />
            </StyledAnchor>
          </LinkButton>
          <LinkButton style={{ display: this.state.active ? "block" : "none" }}>
            <StyledAnchor href="#techno">
              <FontAwesomeIcon icon={faTools} />
            </StyledAnchor>
          </LinkButton>
          <LinkButton style={{ display: this.state.active ? "block" : "none" }}>
            <StyledAnchor href="#contact">
              <FontAwesomeIcon icon={faEnvelope} />
            </StyledAnchor>
          </LinkButton>
        </LinkButtonsDiv>
      </React.Fragment>
    );
  }
}

Any idea how to fix this?

Thank you in advance :slight_smile:

I don’t have the answer, but you may find this article interesting. Large difference between devtools and the “real world” in some cases.

1 Like

It’s been a while since I’ve had to deal with this, so I don’t have my references handy. IIRC, Apple does this cute thing where they don’t treat a pixel as a standard size but a smaller unit based on each devices screen resolution (“hardware pixels” vs “css pixels”). That could be what’s going on.

It seems to be working on Android device, so you might be right about this.
I just need to figure out what Apple is really doing with the pixels now.

Just as a general point, the Chrome devtools aren’t great for iPhones – most of the stuff will work fine, but mobile Safari is kinda the IE6 of browsers. There are quite a few gotchas and you really need either the actual iPhone emulator that comes with XCode if you’re on a Mac, or an iPhone plugged into your computer to test your stuff on as you develop, devtools does not and cannot emulate Safari (it’s basically just the size you’re seeing in the mobile view)

2 Likes

The problem does not occurs on Safari only.
I occurs on every browser that I use from my iPhone…

All of them use WebKit, they’re basically all the same thing with slightly different UIs. All apps that browse the web on an iPhone have to use the built-in WebKit rendering framework. That’s why Chrome can’t emulate them properly. It’s also why the XCode emulator works (and why you can’t get proper iPhone emulators for other platforms)

1 Like

I didn’t know, I could live test from my Phone by simply plugging it haha…
I managed to fix it since being able to test was waaaaay faster.

Thanks a lot :smiley:

2 Likes