0

I need to position some text and logos on a one-page site that uses a big image as its background. Client wants things positioned just so in front of the image. Obviously that is tricky since there are so many different screen sizes and whatnot, and what looks perfect on one size will be off on another.

Is the only way to accomplish this with media queries specific to each mobile device that designate both the max and min width?

And also, I've noticed that what Chrome dev tools' device emulator shows in my browser is not accurate when I actually pull up the site on my iPhone SE. Has anyone else experienced this and how do you get around it? Thank you in advance.

EDIT: Here is the link to the other question I asked if anyone needs to see more detail:

https://stackoverflow.com/questions/55107630/background-image-position-doesnt-correspond-to-mobile-device-view-in-dev-tools

Rob
  • 26,989
  • 16
  • 82
  • 98
  • It depends how pedantic your client is, but you may well need lots of media queries. Other than that, percentage-based values are your best bet. Like `margin-left: 15%`. And as for the Dev Tools issue, you'll need the `viewport` `` tag. See [**this question**](https://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working). Though you may find that shrinking the browser gives a better emulation. Alternatively, there's always simulators like [**MobileTest.Me**](https://mobiletest.me). – Obsidian Age Mar 11 '19 at 20:38
  • 1
    Welcome to web development. Never trust a simulator. Media queries are awesome. read up on the mobile first approach. in this one case, the client is picky. You may need to just do it. cascade the dimensions up and let css specificity override positioning. – Kai Qing Mar 11 '19 at 20:39
  • @KaiQing Wow, so if you a) can't trust a simulator and b) you don't have all the different devices physically in front of you to test out, you're up a creek on this, huh? I mean I'll make eight different sets of rules for vertical/horizontal orientations of different smartphones if I have to, but how can I do it without any accurate way to test? –  Mar 11 '19 at 20:59
  • It is a troublesome predicament, isn't it? But it is true for the most part. Browserstack offers a pretty diverse selection of simulators but you have to figure they're more like a fairly reliable guide than a strict representation of the devices. While most of the time they will be indistinguishable from the actual devices, you will find plenty of times when they do not behave as the actual devices if you have the devices to compare with. So generally, you cannot guarantee without a service that does actual device testing. For most, the simulator has to be good enough – Kai Qing Mar 11 '19 at 21:02
  • If it helps to know, our policy is cross device testing through simulators with a general clause that the feasibility of testing on every current device is so unattainable that bugs on devices have to be treated in real time and addressed if someone points it out while providing the exact device, OS and browser. With enough experience in css, you can just see it in the code when it will be off in certain dimensions. The answer often times is that mobile views have a different design. css can handle that pretty easily. – Kai Qing Mar 11 '19 at 21:05

0 Answers0