I try to add the code behind to my css as solution for the change of text on a Iphone when the devices rotates.
Strange thing is that the code will not applied to the tag. When I look with the inspector of Firefox the properties will be empty. When I add the code to the tag <body>
in the css file, everything works fine.
css file:
html{
-webkit-text-size-adjust: 100%;
}
html file:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Website title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="layout/styles/main.css" rel="stylesheet" type="text/css" media="all">
<link href="layout/styles/mediaqueries5.css" rel="stylesheet" type="text/css" media="all">
<link href="layout/styles/hamburgers.min.css" rel="stylesheet" type="text/css" media="all">
</head>
I load the css between the <head></head>
tags.
Does anybody knows why I can’t add the properties to the <html>
tag. Is the problem that the css file not loaded is until the head?
2
Answers
I found it. There was a wrong code on the first line of the css file, that's why the first line didn't load properly. Now it does. Thanks for thinking with me.
You are using a -webkit-prefixed CSS extension and Firefox is not webkit based.
There are also -moz based CSS prefix for Firefox. However, there’s no such a thing as
-moz-text-size-adjust
and Firefox doesn’t support it.