version 12.1.3
I have a regular web application for which I have added a responsive design (i.e. layout different components if accessed from mobile) using a css file.
I have a search input text field which gets its styleClass properties from a css file as follows:
af|inputText.mobileText::content{
height: 20px;
width:300px;
margin: 2px;
color: Black;
border-color: #a5a5a5 ;
font-size: 16px;
font-weight:normal;
}
When I run the page on a PC and shrink the browser to the size of a mobile, the input text appears to be of right size. But when I access it from iPhone 4s, the input text is very tiny, barely readable.
The input text size looks normal on iPhone if I change the height to 100px, and width to 900px, but it appears HUGE on the Jdev design mode as well as at runtime in PC if I shrink the browser.
What am I not doing right here? why is 20px by 300px showing up so tiny in iPhone?
Thanks.