Stack Overflow
Stack Overflow

Questions tagged [device-width]

57 questions
12
votes
3 answers

What are the device-width css for iphone7 plus?

I need to detect the devices for IOS devices by JS, for iphone-6 I check it by the ratio and devicePixelRatio, I didn't find any information to check if the device is iPhone 7 plus. I found information for the older devices, What are the…
amir
  • 121
  • 1
  • 1
  • 4
11
votes
2 answers

ios 8 box shadow on iPhone 6 Plus

I have a display problem with the box shadow property specifically on the iPhone 6 plus. If I add the meta tag width=device-width, the following box shadow isn't displayed at all: -webkit-box-shadow: 1px 1px 5px 5px #a8a8a8; box-shadow: 1px 1px 5px…
Maddiiiiis
  • 111
  • 1
  • 4
11
votes
7 answers

Why won't my viewport tag properly use device width (no zoom) on most mobile devices?

UPDATE 12/2020: Seeing as this post still gets activity, I must stress that there are no answers here that apply to modern web development. In fact, almost all of the answers here would put your website in a precarious situation when it comes to…
Lawrence Johnson
  • 3,924
  • 2
  • 17
  • 30
8
votes
2 answers

How to simulate device-width and orientation in browser to test media queries?

I'm developing my website locally and using Chrome to preview it as I go. While it's really easy to resize the browser to test media queries that use max/min-width, it's not possible from what I can tell to simulate max/min-device-width with any…
Jordan H
  • 52,571
  • 37
  • 201
  • 351
3
votes
0 answers

html meta viewport user-scalable=no seemed no longer working on iOS 13.3

I am trying to disable user pinch zoom on a web page dedicated for mobile devices, i tried the following meta tags with no avail: I also…
adrian li
  • 457
  • 8
  • 19
3
votes
2 answers

Viewport meta tag in css

In viewport meta tag in CSS for achieving responsive web design we set width = device-width like so that the page's width equal to that of the device's width , so that users do not have to scroll…
titlu
  • 119
  • 2
  • 9
3
votes
2 answers

Force ViewGroup's children move to next line if they exceed the device width

I want to have a view group which may has some views which are positioned horizontally next together. The problem with my code is, everything is fine but when children count is getting greater, all children positioned horizontally together and…
Alex
  • 1,623
  • 1
  • 24
  • 48
3
votes
1 answer

Why is the width of my safari viewport on my iPad only 768px instead of 1028px?

Everywhere I read, the width of the screen on the Ipad 1 is 1024 x 768. I have built a site using bootstrap and the collapsable nav button appears when viewing the site in landscape mode on my iPad. It should not. It should only appear for viewports…
Julian Dormon
  • 1,767
  • 4
  • 32
  • 58
2
votes
0 answers

Setting good font-size for 980px mobile viewport (without meta[@name="viewport"])

I have a very big website many different elements and generation of content. It does not seem practical to unconditionally add a meta[@name="viewport"] to the HTML of all the pages, because then it might break down various elements, and/or make…
cnst
  • 25,870
  • 6
  • 90
  • 122
2
votes
2 answers

Is different media query breakpoints from different browsers (Android) what one should expect in general?

I tested media query, using six different browsers in a Huawei Ascend Y330/Android 4.2 and got three different device-width results reported by mqtest.io. For each browser, I then tested the actual breakpoints on my own html-page with css…
Håkan Olsson
  • 91
  • 1
  • 3
2
votes
1 answer

Will images look sharper on HiDPI devices if their native width is above their CSS width?

The iPhone 6 has a resolution of 1334x750px but has a CSS-width of 375px. What I want to know is if I make an image 750px wide, but set its width to 375px with CSS or HTML, will it look sharper than a native 375px image?
mpen
  • 272,448
  • 266
  • 850
  • 1,236
2
votes
1 answer

Browser width for mobile

I have a Nexus 5, and when I go to http://ryanve.com/lab/dimensions/, it tells me that my width 360. I understand that there is a difference between my phone's resolution and the width of my browser. However, when I write a function to change at…
Thomas
  • 63
  • 8
2
votes
1 answer

What's happening with text-inputs in mobile browser

I'm creating small web-site, that contains forms with some text-inputs. I'm using this meta tag: to display some elements correctly on mobile device. I'm checking it using Android Chrome. It…
lenden
  • 800
  • 2
  • 14
  • 38
1
vote
2 answers

Samsung Tab A8 - CSS Media Query - Chrome Dev Tools

I am developing a website. My target device is the Samsung Tab A8. As per the specs from their official website, its resolution is 1920 x 1200. When I use the Google Chrome's Dev Tools and sets the responsive width and height to the above values,…
Vpp Man
  • 2,384
  • 8
  • 43
  • 74
1
2 3 4