Using the standard CSS for writing content will ensure compatibility with all mobile devices. In my current project, I have developed a mobile application and utilized the following CSS code to display some data:
<div style="float: left; width: 90%; margin: 0 auto;">
<div style="float: left; width: 20%; height: auto;">
<img style="height: 100px; width: 100px;"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvYw0Fzp3l9dRMBOyRr-MVP_sDgMpyH2V5-iOjHVTzIqlJuwiv3Nsd7fE4" />
</div>
<div style="float: left; width: 70%">
<div style="padding-left: 7%; float: left;">
<p>Name:</p>
</div>
<div style="float: left; margin-left: 1%;">
ABCD
</div>
</div>
</div>
However, when I viewed this on different simulators, the output was not as expected. Can anyone provide assistance in resolving this issue?
Following the suggested solution:
/*IPad*/
@media only screen and (min-device-width: 1114px) and (max-device-height: 1391px) and (orientation:portrait)
{
#divName
{
margin-left: -6%;
float: left;
}
}
@media only screen and (min-device-width: 1114px) and (max-device-height: 1391px) and (orientation:landscape)
{
#divName
{
margin-left: -11%;
float: left;
}
}
/*IPhone*/
@media all and (min-device-width: 440px) and (max-device-height: 802px) and (orientation:landscape)
{
#divName
{
margin-left: 7%;
float: left;
}
}
@media all and (min-device-width: 440px) and (max-device-height: 802px) and (orientation:portrait)
{
#divName
{
margin-left: 25%;
float: left;
}
}
<div style="float: left; width: 70%">
<div id="divName">
<p>Name:</p>
</div>
<!--<div style="float: left; margin-left: 1%;">
ABCD
</div>-->
</div>