responsive-design

问题 My bootstrap pages are designed responsively. The viewport is stated as required: `<meta name="viewport" content="width=device-width, initial-scale=1.0" />` (without the backticks) In browsers I tested (Safari, Chrome, Firefox), the responsivity works well. However, iPhones and other smarthphones always show the desktop view. What am I doing wrong? This is a test page for you to see (sorry it's still a little cluttered): http://zhaw.warnez-services.ch/NaKt/stackoverflow.php (LINK UPDATED)

问题 I've been battling this for weeks and I just can't figure out what is wrong. I have 3 columns with 2 rows. So a total of 6 posts in on section. When the amount of text in the title of one post is a Line longer than the rest of the posts, it seems to throw the whole grid outta wack. Below is the code for the 6 boxes <div class="row block02"> <? **sql stuff** ?> <div class="col-1-3"> <div class="wrap-col"> <a href="blog.php?post_id=<? echo($result_miniblog['post_id']); ?>"><img src="../images/<

问题 I know this is a common issue reported on this site and elsewhere e.g. http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div http://dougmolineux.com/wp/?p=242 But I can't get my issue solved. So I've got a responsive site built Mobile first and I'm trying to get an adaptive map solution working i.e. mobile viewports get a static Google map image and for non-mobile viewports the full Google map API and this all has to update itself when the viewport resizes not just on page load. Based

问题 I have a flexbox layout of boxes. The boxes expand to full screen when they are clicked on. The problem is that when the box expands, it moves the other flex elements causing the animation to look jumpy. The flex layout also keeps the expanded box from touching the top of the screen. Here is a fiddle to show you what I am talking about fiddle Box 1 is actually pretty close to the desired effect, but it still jumps around like I described above. I have tried setting all of the unclicked cards

问题 I have a page which uses REM units with media queries. say inner.php I am including that page into my other webpage say outer.php contains the inner.php. Here inner.php uses the html font-size for the break points. like @media all and (max-width:1024px) { html { font-size:12px; } } How can i change the behaviour of this by making my div as the root font-size instead of html tag. @media all and (max-width:1024px) { div#divId { font-size:12px; } } I tried replacing all html tag css with my div

问题 EXAMPLE: This website is a very good example. STEP-1: In one tab just load the page View any image in the far right column. You'll see that they are 638x368 in resolution STEP-2: Open a new tab, and... load the page and open Firebug or Developer Tools ( F12 ) go to the Network (or Net ) tab resize the browser and reload the page Maximize the browser window again View any image in the far right column. You'll see that they are 356x205 in resolution Clearly this is some JavaScript/jQuery

问题 I have that meta tag in my website www.ssd-vergleichen.de <meta name="viewport" content="width=device-width; initial-scale=1.0;"/> To prevent the device from initial zooming into the website. When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%. What did I do wrong? Can anyone help? Thanks in advance Edit: With using <meta name="viewport" content="width=device-width, initial-scale=1.0" /> it works in Android's standard

问题 I'm using this CSS-only strategy for responsive background images and responsive background image and contained content ... an example of the type of setup I'm using for background and content: <div class="fullscreen-cont"> <div class="fullscreen-img"></div> <div class="cont-content-a"> <div class="cont-content-b"> Example content </div> </div> </div> .cont-content-a { display:table;position:relative;z-index:2; width:100%; height:100%; } .cont-content-b { display:table-cell; vertical-align

问题 I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive . Currently, only the max-width on the centered one works. See this jsFiddle. How do I make the right div responsive too? HTML: <div id="container"> <div id="middle">Centered</div> <div id="right">Make me responsive</div> </div> CSS: #container { width: 100%; text-align: center; position: relative; } #middle { background: #ddd; margin: 0 auto; position: relative; width: 100

问题 I want to use the bootstrap carousel to display a different number of items at different screen resolutions. For example: I want to show details for a 3 contacts when the screen resolution is greater than 1000px I want to show details for a 2 contacts when the screen resolution is between 600px and 999px Finally I want to show details for a single contact when the screen resolution is less than 600px Thanks for any help in advance. I have been stuck on this for a few days now.. 回答1: Easy to