发表新帖
发表新帖

How can I create HTML pages that automatically adjust their images to different mobile screen sizes?

前端 未结
关注
5 1046
时光取名叫无心
时光取名叫无心 2021-01-31 11:58

I want to create some HTML pages which will be displayed on different mobile devices. I want them to automatically adjust to different mobile screen sizes.

The HTML page

相关标签:
5条回答
  • 野趣味
    2021-01-31 12:25

    This technique is known as fluid or adaptive layout there's a good introduction here

    0 讨论(0)
  • 隐瞒了意图╮
    2021-01-31 12:30

    If the pages you're talking about literally just contain text and images, then I think all you need to do in each HTML page is this:

    1. Add this viewport meta tag inside the <head> tag:

      <meta name="viewport" content="width=device-width">

      This should make the page render at a reasonable size.

    2. Add this <style> tag inside the <head> tag:

      <style>
img {
    max-width: 100%;
}
</style>

      I think this will make sure all images don't render any wider than the app's webview's viewport.

      (If that doesn't work, try width: 100%; instead. That'll definitely make all images be as wide as the viewport, and therefore no wider.)

    However, your question is a bit too general: we could end up writing a book covering all the possibilities. Could you make it more specific to the code you're actually working on?

    0 讨论(0)
  • 醉话见心
    2021-01-31 12:34

    There are a lot of options here, most far to detailed to talk about in a single question.

    There is no 'automatic' way of doing this - it will have to be manually coded. Three options I can think of, which will require more investigation:

    1. Use the User-Agent http header to identify the device which is connecting and redirect the user to the required website template.
    2. Use JavaScript to do the same as above.
    3. Use CSS to control each object's size. You could force each object to be a percent of the overall screen size, rather than a fixed value. CSS also provides a way to specify styles based on a given screen size: http://www.w3.org/TR/css3-mediaqueries/
    0 讨论(0)
  • 走了就别回头了
    2021-01-31 12:40

    Media queries are the best way to do what you want.

    Set up your html and stylesheet as usual, but at the end of your CSS document use something similar to the code below. You will need to work out the different queries for the different device widths and layouts, but this should get you started.

    /* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}
    0 讨论(0)
  • 予麋鹿
    2021-01-31 12:44

    you can use media query to make your layout responsive, means fix to all screen small, medium and large.

    for more details you can visit this tutorial - learn responsive design in easy steps

    0 讨论(0)
 看不清?
提交回复
热议问题