CODEWITHSUNDEEP
htmliphone
AxA
AxA

Reputation: 65

Html page size to iphone screen

Actually I added some codes to my html page 

<meta name= "viewport" content= "width = device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

I think this should result in a web page that suits all devices

But the result is Picture 1

While the original one is Picture 2

And If you will tell me that I can change the picture size, actually I need this size exactly .. Because it is the size needed as shown in Picture 2

Upvotes: 0

Views: 2348

Answers (3)

Dmytro Lishtvan
Dmytro Lishtvan

Reputation: 808

Try

body {background-size: cover;}

background-size: cover; - for element with your background-image)

Upvotes: 0

fuh che henry
fuh che henry

Reputation: 1

i'll advice you use css MediaQueries to do the responsiveness. Do something like

@media(min-width: your width in px;){
  // Your styles go here.
  // here you can resize the widths and change other styles of your html 
  //elements 
  //  when the device screen equals your defined min-width or above

}

then 

@media(max-width: your width in px;){
  // Your styles go here.
  // here you can resize the widths and change other styles of your html 
  //elements 
  //  when the device screen equals your defined max-width or below

}

Hope this helps. For more on responsive style, visit this link https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Upvotes: 0

Kumquat
Kumquat

Reputation: 72

Well, maybe you could remove:

<meta name= "viewport" content= "width = device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Because it wouldn't let the user see the whole page.

Upvotes: 1

Related Questions