Question

在许多优秀的网站上，我看到页面加载，以便内容与浏览器的宽度相同。特别是在iPad上：如果在页面加载后旋转屏幕并缩小，则内容似乎会在宽度上调整大小以再次匹配屏幕宽度。什么是＆＃34;技巧＆＃34;为达到这个？我不想使用＆＃34;宽度：100％＆＃34;技术，因为我仍然希望页面能够放大＆＃34;然后你必须平移/滚动才能看到剩下的内容。

Answer 1

Sites like what you are describing are NOT using fixed widths, so setting a width on your elements will not let them to fill the entire screen.

If you want to create flexible and fluid layouts, you DON'T want to do this in your CSS:

.yourcontent {
  width: 55px;
}

You would want to create your elements with percentage based layouts, or viewport based layouts.

You can play around all day trying to get a fixed width to look just right, but if you change your browser, you of course don't get any responsiveness. Using something like:

.yourcontent {
   width: 50%;
}

will set to only use 50% of the screen width, no matter the browser sizing.

Using VH and VW (viewport height, viewport width) are preferable to using the fixed widths. Fixed widths can be changed depending on screen sizes using media queries, but this is essentially a waste of time and bootstrap will take care of (most) media queries for you.

example:

.yourcontent {
   width: 50vw;
}

Check out the bootstrap documentation of the CSS to see how this is achieved: http://getbootstrap.com/css/

You can still zoom in using a library like bootstrap.

Answer 2

I found a solution to my problem. I know its probably not A+ practice, but it seems to work. I basically use fixed widths for elements in the roughly "desktop/tablet" size mode, but I set the width using jquery on (page load/screen rotate), like this: $("myselector").width(newSizeWidth); where the width is based on: $(window).width(); However, I do use % layouts for roughly smartphone screen sizes, in the same webpage. I conditionally .show() the smartphone div's (that use % layouts), and then I hide the "desktop/tablet" div's (that use fixed sizes). I use the following in the Head portion for mobile devices: meta name="viewport" content="width=device-width, initial-scale=1" BUT For smartphones with smaller screen sizes, where I don't want zoom function, I change it in the document ready function with: viewportmeta.content = 'width=device-width, initial-scale=1,user-scalable=no';

调整HTML内容的大小以适应窗口，但不适用于响应式设计

2 个答案: