I work with responsive design and whenever I'm testing on androids my websites always look perfectly fine. However with iPhone's I notice there's a lot of default settings that mess with my coding big time. Border radius's coming up on inputs, certain text just blows up to big font's etc. I can never find where these are coming from using the inspect tool and since it's only on iPhone's I'm guessing it's default settings. I try to use "!important" for certain things but that never works. I was wondering if anyone else had these problems and know how to fix them? Am I missing a meta view?
Related
I don't know if this is a normal error in web developer but if this happen lots of time when you are designing, can you give me advices on how can I fix this issue?
I often happened this to my website. when on the developer view, all css style are perfectly good and fit on the design I like, but when I check on the actual devices, some of designs are missing, and sometimes it didn't show up the exact design and css. I still don't know the reasons why in actual devices are different from the developer view.
the most difficult and stressful thing here, is when you trying to fix the issue but don't know where the error is, because in the developer view all css style and design is perfectly good and fit. so even you are trying to adjust some css code you still don't know if that is the exact css you need to work out.
can anyone give me advices how to work out with this kind of issue?
Usually these kind of errors happend when your styling is fixed. For example, do this:
width: 177px;
Instead of :
width: 177vw;
Also make sure your alignment is on point.
Scenario :
I am working on a mobile web version of my website
Problem :
When the design is running on my own laptop
it looks perfect but when I put my HTML files and open on another
laptop of my friend, the design is totally different and super messy.
For example:
font-size is messed up.
absolute positioned div is not at the position I set.
sizes of input fields messed up.
The overall issue is that the UI design looks perfect on my screen but different on others, even with same screen width and resolutions.
Using : Bootstrap 4 to design the UI.
Open to all suggestions, Please suggest.
Thank you.
You might consider using something like Normalize.css or CSS Reset to minimize the difference between the default stylesheets on browsers and different operating systems. Stylesheets like these give your sites a consistent starting point, removing any custom styling which may be added by the browser publisher or computer maker.
Just add the stylesheet as the first <link> in the <head> of your index.html and it should give you a good starting point. There may be some display inconsistencies afterwards, due to hardware or operating system differences, so some minor tweaking may be necessary.
So yeah, I'm working on coding a website, and I'm primarily using the font "Robot Condensed" ( http://www.google.com/webfonts/specimen/Roboto+Condensed )
Now the problem is I have a jQuery thing, where you hit the button and it expands to the full text. When you hit this though, the all of the font-weight: 300 texts on the page mess up, with no apparent way to return them to normal except by refreshing the page.
I don't believe the problem lies in the Javascript though, because I don't know of what in it could cause this, and also, it was doing this yesterday as well, before I implemented any Javascript (you would just scroll down the page and after a few seconds the font would mess up). I've only seen this issue in Firefox.
Normal
http://prntscr.com/t009m
Broken
http://prntscr.com/t005u
Normal
http://prntscr.com/t00fl
Broken
http://prntscr.com/t007z
It's like the font is becoming more thin or something. Has anyone ever experienced anything like this or might have any idea what's causing it?
Thanks.
EDIT: Okay, it seems to happen when I use any kind of jQuery on the page.
In our current project, we have one particular page where, when viewed in IE7 or IE8, fonts seem .1 or .2 em larger than they should be. Having inspected the code and css, I cannot see where this is coming from. This issue affects ONLY ONE PAGE which is to all intents and purposes exactly the same as many others in the site, which display as expected.
Some things I have ruled out:
Text-size settings (it's not that, set to medium, and anyway if so why one page only)
DPI settings (same reason as above)
Browser zooming (it's set to 100% - the problem scales with the zoom setting, btw)
Browser-specific CSS (no browser specific rules are applied to the elements in question)
Stray font-size setting code in the markup (I've been through and eliminated this)
Voodoo (okay I haven't ruled this out - as my frustration increases I'm starting to think it might be this though)
The page displays as expected in Firefox. This is not a live site yet so unfortunately I can't point you at the URL.
Has anyone come across something similar and, if so, what was it?
Many thanks,
G
Without showing us or replicating it at least, asking is pretty much near useless but I suspect it's probably just a tag that wasn't closed on an element with an above average font size.
I'd recommend validating the HTML. If it's good, then it's hard to say without looking at the code/page.
Can someone look at this page carefully. I am trying to fix font on this page. I don't know what previous programmer has done to font. Can you look at service guarantee and service features headings in green panels, edges of text are like someone cut this font with seesaw. Similarly on other parts of page. They are supposed to look smooth.
viewing page on ff and ie8 (widows xp).
I think you mean that these sections aren't anti-aliased. This isn't something you can control when you display text on the browser -- it's actually browser- and OS-dependent.
If it's important to your users to have smooth fonts, then you could anti-alias them in an image program and use images instead of text, but this is extremely inefficient and makes your page a gigantic pain to update.
So, in short, there isn't anything you can do to fix this. See this SO question for more details.
use firebug which is a firefox plugin to see the styles and html tags used in the web page, you can even edit the css used in the web page through firebug.
Your page looks fine on my browser (Chrome under Windows).
Different browsers all render text differently. What you will find is that there are often sweet spots in font sizes that look better than others. In any case, what you are talking about is whether the browser is displaying fonts anti-aliased or not.
There is a CSS3 property, font-smooth, that you can adjust for this, but don't expect it to work on browsers that aren't smoothing their fonts anyway. You can read about it here: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
In short, don't worry about it. If it is a big deal for you, then experiment with different fonts and sizes. A good tool for doing this is at http://www.typetester.org/
Don't forget to test your site at BrowserShots.org. It will do screen captures for you, so you can check these details on a wide range of platforms.
If you must have your font rendered in a specific way, then it must be done in an image. This is not recommended. Text should be text wherever possible. However, if you must do it this way, consider one of the many scripts that assist, so you can keep text for browsers that don't support the script, and SEO isn't a problem. Typeface.js is commonly used for this.