i have problem with different appearance between android and desktop.
not about responsive, but a simple css appearance
i have this
<div class="related">
<h3>Related Posts</h3>
</div>
with css:
.related {
height: 30px;
}
.related h3 {
font-size: 18px;
line-height: 30px;
}
on desktop, h3 lined perfectly in the middle of .related bar, while on android (galaxy grand prime) h3 lined a little bit above, closer to top, around 40% closer to top than 60% to bottom. so 20% difference, which is very visible.
am i missing something? is this Android bug? thanks
The #media rule is used to define different style rules for different media types/devices. Media types look at the capability of the device, and can be used to check many things, such as: width and apply different css to that device.
Example : #media screen and (max-width: 300px) {}
Different devices often behave totally differently and different browsers differently again.
Related
I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.
Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width.
The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.
I also tried using nbsp instead of just spaces.
changing letter-spacing also did not seem to have the effect I wanted.
Is there any trick to get this to work ?
you can see the site here disconnected.tech
Turns out some gliphs are missing in Google fonts.
A workaround is Adobe's Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki should also work.
I include straight from Adobe, not via Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
It may be possible to tell Google Fonts to include all necessary characters in their reduced Source Code Pro (text= parameter).
The problem is happening on Chrome/Android and possibly Chrome on other mobile devices. I have only been able to test it on a Nexus 5x so far. I am using Handlebars.js to dynamically display quotes inside paragraph tags. Whenever the displayed quote is less than three lines, the font-size shrinks. I am having a difficult time debugging this font sizing issue because it only seems to be happening on Chrome for Mobile. The issue does not replicate in Chrome dev tools responsive mode. The font resizing does not happen in IOS Safari or Firefox Mobile.
If you have Chrome on a mobile device would you please have a run through of the game and see if you notice the issue? LINK HERE
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
Here is the code for that section of the site (link to repository):
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p {
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
<div id="game-screen">
<div id="game-pictures">
</div>
<div id="game-quotes">
<h6 class="center">Quote {{counter}}/10</h6>
<p>"{{content}}"</p>
</div>
</div>
Does anyone have an idea of what might be causing this font-resizing?
Thanks in advance if you can offer any help.
Link to Repository
Edit: Thanks to all of you who helped me!
For cross compatibility for my web pages I tend to use the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This seems to work with no additional styling with CSS needed for the mobile platforms. Not sure if it what you want though.
Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.
I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.
i added a * after your paragraph selector to selects all the paragraph's. maybe this will solve your problem. please tell me if it worked, i wanna know the outcome :)
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p *{
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
I'm not sure if this is the answer to your question but I find this consistent for CSS:
body {
/** Setting the 'font-size' property of the <body> to 62.5%
* allows you to use the 'em' measurement as you would in 'px' form.
* ...hope that's clear.
*/
font-size: 62.5%;
}
#someDivInBody {
font-size: 1.65em; /* or '16.5px' by CSS */
}
This method has allows me to use the em measurement as I would in px but with more consistency and control.
The rem unit is unlike px or em.
When you resize the window, using rem will keep the ratio of the text and the window size the same.
Try using em or px to resolve the issue :)
This may be because of the resolution of the phone or tablet. It may be best to customize your webpage to stay the same size, no matter the device.
try using max-width:Resolution;
You will have to apply this to the body class for this to apply to everything.
I.E.
`.body {`<br>
` max-width: 3840px;` /*4K resolution, for 4K displays*/
This SHOULD fix the text issue. If not, please refer to https://www.w3schools.com or https://developer.mozilla.org/en-US/. it may be able to help you.
I have experienced this same issue and it's very annoying. I filed a bug for Chrome (see details here: https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9) and they basically said it wasn't worth it to them to fix it. In my case, as suggested by #Cheesy, my android's accessiblity was set to larger than standard font size. That does not invalidate the issue, IMO. If large font size makes ALL font larger great. But it should not inconsistently be resizing font in some places on the page while ignoring others.
The only way to fix this for my React application was using this CSS rule:
* {
max-height: 999999px;
}
I have no idea why this works.
It was an extremely specific issue that I had with my Samsung Note 8 and nothing else worked.
I also tried different meta tags combinations and all possible text-size-adjust values, nothing worked but this.
Hopes this helps someone from diving into this rabbit hole that I just came out of.
For me, I had to include minimum-scale in the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
On my dedicated mobile website, I use the html star character ★ ★ and I apply CSS on it, especially color.
<span class="orange">★ ★ ★</span>
<span class="grey">★ ★</span>
.orange {
color: orange:
}
.grey {
color: grey;
}
Everything works well on most browsers and os, like this:
But on Samsung devices with Android 4.4 kitkat (Galaxy S4, S5...), the stars are natively styled by touchwiz (I suppose) and the color property has no effect anymore on stock browser and Chrome, but not Firefox !
And it works well on other kitkat (LG G2, Nexus 7) or Samsung with Jelly Bean.
I tried webkit specific style like -webkit-text-fill-color, with no effect.
I looked for all webkit style, but nothing seems to correspond except -webkit-text-fill-color.
I know others way to make stars like images, custom font-face or even CSS shapes, but simpler would be better.
So, have you ever seen that and found the magic style that works ?
Thanks.
I found what the problem was. It’s inside the fonts of the system, in this file exactly :
/system/fonts/NotoColorEmoji.ttf
By changing this font (Samsung emoji) with another with native Android emoji, the stars appear normally.
I found the method here : XDA - [MOD] Emoji iOS / Google on Samsung S4 Kit Kat.
So it’s not possible to tweak Samsung stars directly.
Since I have multiple colors and sizes stars, work in responsive design and need to manage retina and others HD displays, image were too onerous to implement.
I tried CSS shapes, but as I play with different sizes in responsive design (changing root font-size in em modifies the whole page), something accurate in one size, was not in another.
So I used font-face.
On Icomoon, I picked the star and made a custom font. I put the correct style and that’s it ! I can apply css like I want.
The code looks like this :
HTML :
<span class="icon-star"></span>
CSS :
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?4n7iw5');
src:url('fonts/icomoon.eot?#iefix4n7iw5') format('embedded-opentype'),
url('fonts/icomoon.woff?4n7iw5') format('woff'),
url('fonts/icomoon.ttf?4n7iw5') format('truetype'),
url('fonts/icomoon.svg?4n7iw5#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-star:before {
content: "\e600";
}
I know this was asked 3 years ago, but I recently ran into the same issue. One way is to use the css shadow hack Credit goes to Tigran for the original solution:
.orange {
color: transparent;
text-shadow: 0 0 0 orange;
}
You can do some tricky things will fonts and CSS. You might be able to colour the Samsung font. Check out my other post here:
https://stackoverflow.com/a/50478585/5078765
Let me know if it works.
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
I have some CSS and HTML where the font-size is explicitly styled to be 13px, and for the most part it stays that way, but occasionally Chrome on the Nexus 7 sometimes displays a part of the same page as 14px;
Unfortunately, I have been unable to recreate the issue in jsfiddle, so I'm not sure what is going on.
Some if the styles I use to influence the font-family and font-size can been seen at my attempt to recreate the issue at http://jsfiddle.net/K9hyG/2/.
When using the Chrome debugger, I can see the following in the Computed Style for one of the offending paragraphs:
border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
font[size="2"] - 13px default.aspx:427
body - 13px default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;
The text-shadow is generated by my usage of jQuery Mobile. In the Chrome debugger, two instances of the text-shadow directive appear. One inherited from div.ui-page.ui-body-c.ui-page-active (ui-body-c is the activating component) and the other from body.ui-mobile-viewport.ui-overlay-c, (ui-overlay-c is the activating component), but both definitions from the same section of CSS in the theme file.
If I deactivate one of them, the offending paragraph actually changes to 13px in Chrome Debugger, but still looks the same on the device. If they are both deactivated in Chrome Debugger, then it goes back to 14px. This still happens, even if the text-shadow set to rgb(255,255,255) 0px 0px 0px.
I've seen this post, but that issue is largely unresolved as well.
A colleague of mine has discovered the answer. It looks like I am the unwitting victim of Font Boosting
As per the link, Font Boosting can be disabled by providing max-height: 1000000px on the element in question or on body, body * for all elements.
Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.
I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.
After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Maybe the width and heigth values must be corrected according your needs.