Menu
I have a box with a border.
border: 1px solid #000;
I am using the following viewport setup:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
The border seems to be 2 pixels on the top and right side. What is the reason for this?
Additional: there are no other CSS rules other than a width and height.
795
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
So each side can have its own value. The default value of border-style is none. Borders are put on top of the element's background.
Click the Table Design tab.) Click Border Styles and choose a border style. Click Borders and choose where you want to add the borders. Tip: To change or add borders for part of your table, check that Border Painter is selected and then, in the table, click each border that you want to change or add.
The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density.
How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match.
This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
div {
border-width: 0.5px;
}
And similar techniques are shown here: http://n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
