I am getting enlarged logo image in HTML and CSS website in iphone safari browser. As I have already set width and height in css using media queries but still I am getting this issue only in iphones not on android.
Please Visit this link to get the code and related files: https://github.com/abhijeetjain101/Portfolio-Website
@media only screen and (max-width: 480px){
.logo {
max-height: 20%;
max-width: 40%;
width: 50px;
height: 40px;
}
have you checked that the screen dimensions are meant for your actual iPhone, sometimes they can be 1px off
*{
margin: 0px;
padding: 0px;
}
/* Small phones line iPhone 5 SE */
@media screen and (max-width:374px) {
}
/* Regular phones like Iphone X + */
@media only screen and (min-width:375px) {
}
/* landscape mobile devices */
@media only screen and (min-width:480px){
}
/* tablet portrait */
@media only screen and (min-width:768px){
}
/* tablet landscape */
@media only screen and (min-width:1024px){
}
/*Small Monitor Screen */
@media only screen and (min-width:1280px){}
/* med Monitor Screen */
@media only screen and (min-width:1440px){}
/* Large Monitor */
@media only screen and (min-width:1920px){}
This is kinda my starting point for any CSS script for Web Dev, also ensure that if you're using, responsive attributes for image size that you dial it down or up based of screen needs when you mover to a new media query
just give in style this code img{width:100%;}
Just give min & max width of image or else use % instead px this might help