I am writing a web application for use on mobile touch devices, to begin with I am concentrating on the ipad. The application will contain a grid of thumbnail photographs, similar to google images.
I am really struggling with the layout of this site, I want the thumbnails to be equally spaced, with margins of the same size at the edges.
I have tried several methods, but have run into problems with all of them.
1.I tried designing the site with a fixed width of 960px, and laid out the thumbnails and their margins symmetrically for this width. This worked to a degree, but the ipad defaults the browser width to 980px, so the white space at the edges were larger than I would have liked.
2.The same as above, but I also specified:
<meta name="viewport" content="width=960, user-scalable=no" />
Everything now looks as it should on the ipad (in portrait), it's not too bad in landscape (I think the thumbnails are blown up, and a little pixelated). It displays fine on the desktop, but is unusable on the iphone as everything is too small.
3.To get round the above problem, and as suggested by apple themselves I tried swapping the above with:
<meta name="viewport" content="width=device-width" />
With this, I get a sensible scale for both iPhone and iPad, but the problem is I can't get pixel perfection on my layouts, the white space at the left and right edges of the screen are not equal (because I am dealing with a grid of fixed width images, that do not fit a whole number of times into the space available)
Can anyone suggest the best approach please, I did consider using javascript to adjust the layout, but would prefer not to take this route.
Thanks
A good attempt. I use this, see my link for an example, however this is only for iPhone mainly as the iPad is different. I would suggest seeing the FIXED layouts on:
http://www.gorgeouscouture.com/mobile/
http://m.oasis-stores.com/
http://m.asos.com/mt/www.asos.com
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="all, handheld" />
Notice I do not use the HTML5 heading. This is simply for other use of mobile devices. MyCSS:
body{width:320px;margin: 0px auto;min-height:356px;font-family:Georgia, Georgia, Arial, serif;background-repeat:repeat;background-position:50% 50%;text-align:center;background-color:#f4f8f9}
#b{position:relative;margin-left:0px;margin-right:0px;width:auto;height:auto;background:#fff;-moz-box-shadow:0 0 3px 3px #eaeaea;-webkit-box-shadow:0 0 3px 3px #eaeaea;box-shadow:0 0 3px 3px #eaeaea}
#content{position:absolute;width:auto;height:auto;top:25%;background:#fff}
Notice the fixed width assignment though.
Related
I'm trying to make different dimension of one modal.
If I resize in the Browser the change is what I want.
But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.
I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.
I would like to know why my "default" case is not working for mobile.
The code can be found here.
Try adding viewport meta tag in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>
I have been getting reports from a couple of users "Android users in most cases" that the website is opening as a white screen on their phones.
After some troubleshooting, I found out that if you zoom out and scroll around, you will find the actual website.
When you open the website, the viewport is showing a large white screen and the actual website is inside it.
I added this to the header.php <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1"> and its not getting fixed.
Any idea why and how to lock the website content to the viewport cadre?
Screenshot sent by users: when they first open the website
Screenshot sent by users: After they scroll right and zoom out a bit
Edit:
First try changing your viewport tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You could try adding the following CSS:
body {
width: 100vw;
overflow-x: hidden;
}
You could also try disabling zoom by adapting your viewport tag with the following:
maximum-scale=1.0, user-scalable=no
You might also want to look at the CSS touch-action property:
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
this is my site. http://losroblesrestaurant.com.ar/index7b.php. When displayed on a phone the menu doesnt fit on the screen. I need it to be viewd at 347 px width. I have already tried with media queries and viewport but it doesn't seem to work.
I have tried
<meta name="viewport" content="width=700, user-scalable=no">
<meta name="viewport" content="width=80%, user-scalable=no"> and
<meta name="viewport" content="width=device-width, user-scalable=no">
none of wich make any difference at all
I am not allowed to post images, so please check this: http://losroblesrestaurant.com.ar/images/iphone-problem.jpg
The code for the phone has
body{min-width:347px;}
EDIT:
You set a fixed min-width on .inner. You need to remove it.
You also have a width of 990px on .inner-blanco. Change it to 100%.
I'm developing a site using WordPress. The site is centered and 1044 pixels wide. On desktop browsers everything works as expected, but when I check it on an iPad, the design is cut off on the right (using either iPad orientation) and I have to swipe to see it all.
http://oscarciutat.com/reciclar/home/
I added this CSS rule with no success:
body {
min-width: 1044px;
}
If I add the following meta tag the problem worsens:
<meta name="viewport" content="width=device-width" />
Any ideas about what I'm doing wrong here? Every solution I try doesn't work.
Thanks in advance
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- You can change the initial-scale to make it fit --->
Try using the above, that should make it work.
If not, you could use CSS media queries for the iPad screen resolution
#media (max-width: 1024px) {
YOUR CSS TO REDUCE WIDTH OF SITE
}
The iPad3 does indeed have a much higher resolution, but they all work with 1024x768 as viewport. Thats why it won't fit.
I am new to mobile web app development, I wrote a small app in jqueryMobile & asp.net, but I am having problem with screen height, when i test my app in opera emulator then for large screen sizes my app look small in size, is there a way to detect & adjust height & width so it looks like a native app & fills the entire screen.
Without knowing how your css markup looks like try adding the following meta tag:
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
This will make sure your page starts in the correct scale (and disallows pinch zoom)
You can read the css trick to make the CSS target screen sizes
http://css-tricks.com/css-media-queries/
Try adding the following snippet:
<meta name="viewport" content="width=device-width">
From what you said that should fit your needs.
You can find more info about the viewport meta tag here https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
There are also some other meta tags you might consider.
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
Most of this I learned from exploring the html5 mobile boilerplate. Which is a rock solid starting point for any mobile application. If you haven't checked it out before I believe it will help you out alot http://html5boilerplate.com/mobile