Html页面大小到iphone屏幕

Actually I added some codes to my html page

实际上我在我的html页面添加了一些代码

<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

但结果是

While the original one is

而原来的是

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

如果你告诉我我可以改变图片大小,实际上我需要这个尺寸...因为它是所需的尺寸,如图2所示

3 个解决方案

#1

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.

因为它不会让用户看到整个页面。

#2

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

我建议你使用css MediaQueries来做响应。做点什么

@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

希望这可以帮助。有关响应式样的更多信息,请访问此链接https://www.w3schools.com/css/css_rwd_mediaqueries.asp

#3

Try

body {background-size: cover;}

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

背景尺寸:封面; - 用于带背景图像的元素)

#1