We Keep Coding

Can we detect font size or font family in mobile device in web project?

I am working on a project where I need to change font style and size according to user need like if the user's devices have large font-size than font-size of web pages also large.
For example, your android or ios device has base fonts-size like below
main heading - 18px
secondary heading - 16px
content - 14px
and your web main page
Font-size is
main heading - 16px
secondary heading - 18px
content - 12px
Now I want to detect the android or ios device font-size to change my web page font size.

(continuation from comments above).
var div = document.getElementsByTagName('body')[0]; // this will set the body tag as variable
// this taken from here: https://stackoverflow.com/a/7444724/6525081
function css( element, property ) {
return window.getComputedStyle( element, null ).getPropertyValue( property );
}
alert( css( div, 'font-size' ) );
Read more about getComputedStyle here
You can check similar fiddle here
Hope that helps.

you should use media queries, this command is for you to define specific styles for certain screen sizes, follow a tutorial on how to use
Example:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Complete tutorial here
in case you want to change the source according to the size of the device source use the rem
it is a measure that takes as a base the size of the font configured in the browser
Example:
div{
font-size: 1rem
}
Here's the rem tutorial

Use hover/active CSS by default on mobile devices

On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.

No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/

Size Font to Window

I'm looking for a suitable font size for my page. I currently have it set at -webkit-xxx-large as that fits my window perfectly.
What I need is the text to fit inside the window width (not fussed about height) no matter what the window size.
Example:
1920px Window Width - font-size: -webkit-xxx-large
480px Window Width - font-size: large
Whether it uses Javascript/jQuery or if it's just CSS it doesn't bother me. I just need a suitable one-size-for-all.

Try the media query using #media like (IE support)
body {
font-size: -webkit-xxx-large
}
#media screen and (max-width: 480px) {
body {
font-size: large;
}
}
Demo: Fiddle - reduce the width of the result panel

Don't use the size constants. Find a value based on the em scale and that will work for different screen sizes.

Text can be a pain to size exactly. BigText is a nice Javascript Library that can size it to 1/100th of an em for you pretty easily.

You could look into something like: http://simplefocus.com/flowtype/
Although i would not recommend this for your body text as media queries would probably suffice and give you more control. Smaller on small screens is not always better.

how to change the font-size proportionally to the change size of the window in CSS3 or javascript

I do some web app and i have some problem with font-size.
How to change the font-size proportionally to the change size of the window in CSS3 or javascript?

The ideal way to do this is using the vw unit, which is defined as 1/100th of the viewport width (hence the name). So, for instance, if you wanted your text to be 4.5% of the browser's width at all times, you could use the size:
font-size: 4.5vw;
… and theoretically, that should work. Unfortunately, you'll find, it doesn't quite work as expected: there's a bug in WebKit browsers (at least) where the value for font size isn't live-updating (although it is for all other dimensions). You need to trigger a repaint in order for the font size to change, which can be done by updating the z-index property from JavaScript:
window.addEventListener('resize', function(){
document.getElementById('myEl').style.zIndex = '1';
}, false);
This may create a little bit of choppiness, but it means you don't have to calculate any actual dimensions in JavaScript, and you don't need to used "stepped" sizes like with media queries.

The ideal way to do so is to combine between the VW font-size and #media queries. Reasons are:
1) em for itself won't rescale by window size
2) vm for itself will be too small for resolutions / screens lower than 800px.
So the right way to achieve this is:
Define a class - prop-text with VM=1.0 for your desired screen width
Add media queries to fit the font-size with your desired lower resolution grids.
For my responsive grid (which sets a 1/2 column to take 100% width below 768px width) it looks like that:
<style>
.prop-text{font-size:1.0vw}
#media (max-width : 768px) {
.prop-text{font-size:2.0vw}
}
/*other media queries here - fit font size to smartphone resolutions */
</style>
<div class="prop-text">your text is here</div>

Set your base font size (the one you define for your body element in css) in px then everywhere in the rest of your page set font sizes relative to that one using emunit, then you can use media queries to change the font sizes of all your pages by just changing your base font, something like this:
body {
font-size: 15px;
}
#media (max-width: 1000px) {
body { font-size: 1.3em; }
}
#media (max-width: 500px) {
body { font-size: 1.1; }
}

You have 3 ways to do it:
Using http://fittextjs.com/, but pages can start to be slower
Using media queries
Using ems
Now, it depends on what you want to be your final result.
I'd go to option no 3.

I think the best way might be vh, beeing that font-size changes the height of the text. Using vh means that the text will always foolow the size of the page, even if the user resizes the page or the screen is small.

How to output different images depend on user screen?

For example if I have two sets of images for my website, one set is low resolution,
another set is high resolution, I to show the low res to the screen size like 1280 width users, and the others are high res images, how can I do that?
Using javascript? or any other method ? possible to define in css or html?

You can use CSS media queries for that. More about media queries here.
Example:
/* This block applies to all "screen" devices
*/
#media screen {
.some-content {
background-image: url(largeimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 1279px (e.g., < 1280)
*/
#media screen and (max-width: 1279px) {
/* Use `mediumimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(mediumimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 639px (e.g., < 640)
*/
#media screen and (max-width: 639px) {
/* Use `smallimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(smallimage.jpg);
}
}
Note the descending order of the above: First we specify for the largest device, then smaller ones, then smaller ones, so that latter queries override earlier ones (since a device with a screen of, say, 1024 pixels will match both of the first two rules).

you can design it with something like
body {width: 100%; height: 100%; position:relative;}
you will face this problem for browser compatibility.
define it in your css you can have any class you wish . i have done it for my website and you can have the same image working for you.