Im trying to open up my latest site design on my phone and have it match the screen when i go to the url. However, it always open up much bigger and I have to double tap the screen to resize it to the correct size.
I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1">
But nothing is working. Please view source on my site and html at:
http://directsellers.org/NeverTakeNo4Answer/LetsGo.html
and tell me what I need to fix. Thanks.
I faced the problem like you did.
So you have to set your html and body width, not in pecentage or pixels, but in vw (viewport width). For example:
body, html {
width: 100vw;
min-width: 100vw;
max-width: 100vw;
overflow-x: hidden
overflow-y: auto
}
I did this way, and it works.
You are missing the CSS for the Responsive Design. You need to target the device width using media queries and write CSS for mobile and tablets.
Please follow the link below to get an idea about it.
http://www.zell-weekeat.com/how-to-write-mobile-first-css
You give fixed Width. just give width:100%. to all div and content. it will automatically responsive
Related
I'm working on a page template with a header at the top of the page. Nothing complex:
<div class="top-header">
text
</div>
.top-header {
width: 100%;
height: 50px;
}
In Chrome, that produces what I expected...a bar across the top 50px high and as wide a my viewport. Resizing my browser changes with width, but not the height, which is fixed at 50px.
However, using Chrome's Developer Tools, I realized that when viewing in responsive mode, the header resizes vertically. In essence, there's a level of full-page zoom going on.
What key concept am I missing here? I assume it might be a zoom property on the body. How to I ensure that my header is 50px on all devices?
Screen shots:
Top is using Chrome's responsive mode, bottom is simply resizing Chrome to the same width not using responsive mode.
You are probably missing the viewport meta tag, to control the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
From Apple's documentation:
Safari on iOS displays webpages at a scale that works for most web
content originally designed for the desktop. If these default settings
don’t work for your webpages, it is highly recommended that you change
the settings by configuring the viewport. You especially need to
configure the viewport if you are designing webpages specifically for
iOS. Configuring the viewport is easy—just add one line of HTML to
your webpage—but understanding how viewport properties affect the
presentation of your webpages on iOS is more complex. Before
configuring the viewport, you need a deeper understanding of what the
visible area and viewport are on iOS.
This other anwser does a very good job explaining why you need to specify it: Is the viewport meta tag really necessary?
I have a custom wordpress theme and I've been trying to debug this issue for days but can't figure it out. Would greatly appreciate your guys help!
On mobile devices - portrait view, the body isn't full width. On desktop browsers it works fine, even when you reduce the browser width to the same size as a mobile device.
Screenshot from my iphone -
Mobile screenshot
I already have this tag in the head -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My site - laxgoalierat.com
Edit: As you see the page initially loads on the mobile device with full width however then it adjusts to what is seen in the screenshot.
I've tried playing around with the body CSS. Making body position:fixed makes it expand the full width however then I cannot scroll up and down :(
I'm out of other ideas. Let me know if providing any other details would help.
Thanks in advance, Damon
Your offending HTML seems to be coming from elements similar to this:
<div class="yui-skin-sam avpcw_container">...</div>
I don't know what these are or what they do... But they are the reason for the effects you are seeing.
So a quick and dirty approach would be to apply css to hide either or both of these classes to patch over your problem. For example:
.yui-skin-sam {
display: none;
}
Obviously you need to be sure that hiding these classes is appropriate. I had a quick look to try to work out what they are used for; but didn't get anywhere.
I'm using Zurb Foundation and am getting a strange bug on the iPad. The defect occurs when I start in landscape view, focus on a text input, and then rotate the device from landscape to portrait.
The viewport is set to:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
When I view the DOM in web inspector, the glitch area to the right is not represented at all. I've tried to put an overflow-x: hidden; on the html and body elements, but still no luck. I'm not sure if it's a me issue, Zurb issue, or iPad issue. Any advice would be greatly appreciated.
Try adding this CSS to the containing form:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
If that doesn't do it, try moving those rules to the form's parent, etc.
This fixed a similar issue I had relating to bits of form fields not being redrawn correctly. Hacky workarounds like this make me love webdev so so much!
I just had the same issue. It's a bug with iPad's (maybe all of iOS) that when the page is smaller than the window/viewport and you have the keyboard open while rotating... it doesn't know how to handle it. Haha.
Here's how I fixed mine with jQuery
jQuery(function($) {
var iPad = navigator.userAgent.toLowerCase().indexOf("ipad");
if(iPad > -1) {
$('body').css({'min-height':($(window).height())});
}
Fixed it on mine. No more weird black box or broken looking page. Let me know how it goes for you!
I have website in wordpress and I have a small problem with content. On computers main content shows fine. As you can see on mobile device, content has approx. 50% of width and I don't know why.. Can anybody help me please?
Website:
http://www.djreneek.com
Mobile screenshot:
https://dl.dropboxusercontent.com/u/19898988/Screenshot_2013-07-31-21-41-18.png
Thank you very much
EDIT: now I see diacritics doesn't work on mobile devices too... (ščťžýá etc..)
Ensure you have set a viewport within the <head> of your document catering for mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The issue is with your wrapper on the website. If you look at the screenshot, there is a horizontal line that extends past the actual content, which means your wrapper or container is too big. Try using max-width: n px; on your wrapper. If that doesn't work try media queries.
For example in your css:
#media screen and (max-width: 600px) {
#wrapper {width: n px;}
}
It says that if the width of the screen is >= 600px, update these styles.
This would go underneath your styling for the wrapper. If you do go this route, you'll want to implement what Vector answered with the additional meta tag. It basically tells the document that there are media queries.
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />