如何使用标题图像为移动设备设置HTML，这需要整个浏览器的宽度？ [英] How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?

问题描述

我担心的是我必须为移动设备建立一个网站。现在的问题是：不同的智能手机有不同的显示分辨率。

有例如840x560,480x320或800x480。

为了让图像适合显示器的每一部现代智能手机，我需要写些什么元标签，CSS等等？

谢谢，克里斯

因为 width：100％; 似乎得到了很好的支持，所以我建议：

  #header {
 width：100％; 
 padding：0; 
保证金：0; 
} 
 #header img {
 width：100％; 
 padding：0; 
 border：0; 
 outline：0; 
} 
 
 
< div id =header> 
< img src =header.png/> 
< / div> 
  

或

  #header img {
 width：100％; 
 padding：0; 
 border：0; 
 outline：0; 
} 
 
< img src =header.png/> 
  

设置 just 宽度表示图片的宽高比将由浏览器保存。但请记住，将图像操作（缩放/调整大小）传递到手机的浏览器可能会导致引入不太漂亮的手工制品。

如果您有可以选择使用不同尺寸的图片，您可以使用 @media queries ：

 < link rel =stylesheethref =mobileStylesheet1.cssmedia =only screen and （max-device width：840px）/> 
< link rel =stylesheethref =mobileStylesheet2.cssmedia =only screen and（max-device width：800px）/> 
   

并且，在这些样式表中，定义：

< h3> mobileStylesheet1.css

  #header {
 background：transparent url（path / to / 840pxImage.png）0 50％不重复; 
 
 $ / code $ / pre 
 $ b 
 mobileStylesheet2.css 
 
 
 
  #header {
 background：transparent url（path / to / 800pxImage.png）0 50％no-repeat; 
 
 $ / code> 
 
 
 
 mobileStylesheet3.css 
 
 
 
  #header {
 background：transparent url（path / to / 480pxImage.png）0 50％no-repeat; 
} 
  
 
my concern is that I have to build a website for mobile devices. In the concept is an image set as header.

The problem is now: Different smartphones have different display resolutions.

There are e.g. 840x560, 480x320 or 800x480.

What do I have to write as meta-tags, css, etc. to fit the image in "every" modern smartphone to the display?

I hope my concern was clearly described.

Thanks, Chris
解决方案
Because width: 100%; seems to be well supported I'd suggest either:
#header {
    width: 100%;
    padding: 0;
    margin: 0;
}
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}


<div id="header">
    <img src="header.png" />
</div>
or
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}

<img src="header.png" />
setting just the width means that the image's width/height ratio will be preserved by the browser. Bear in mind, though, that passing off image manipulation (the scaling/resizing) to the phone's browser might result in less-than pretty artefacts being introduced.

If you have the option of using different sizes of images, you can call those using @media queries:
<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>
And, in those stylesheets, defining:

mobileStylesheet1.css

#header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}


mobileStylesheet2.css

#header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}


mobileStylesheet3.css

#header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}


                        
这篇关于如何使用标题图像为移动设备设置HTML，这需要整个浏览器的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！