I'm trying to teach myself how to make a mobile version of a website, so I started off with something basic.
I have the following code
<body>
You are using...
<p class="mobile">
Mobile
</p>
<p class="desktop">
Desktop
</p>
</body>
with the CSS
#media screen and (max-width: 480px)
{
p.desktop {
display:none;
}
}
p.mobile {
display:none;
}
Basically, I want either "mobile" or "desktop" to display depending on which device you're using. When I navigate to the site on my desktop it says "desktop", so that seems fine.
But when I do so on my iPhone it still says desktop.
I have tried increasing the max-width to 640px which is the iPhone 4S' resolution. But I still have no luck. What am I doing wrong?
The default viewport on an iOS device is somewhere around 1000 pixels. You may notice when you pull up your test page that it doesn't look like it's a 320px wide - it's way zoomed out.
You need a viewport meta tag in your page head that sets the viewport width to that of the device:
<meta name="viewport" content="width=device-width">
Once in place, you'll find your #media query works nicely (although you need a p.mobile { display: block; } bit to make the "mobile" text show up).
Related
I have some problems when putting images in my iPhone app using PhoneGap.
According to this website the width of any iPhone screen is 320pts.
In my CSS I have the following code:
#someId {
position:absolute;
top:0px;
left:0;
max-width:640px;
max-height: auto;
}
And in my HTML file the following snippet:
<img src="image.png" id="someId" alt="">
However, if I leave it like this, the image will always be bigger than the actual screen. I'm using the iPhone 6.0 Simulator.
Changing the value of max-width to 320pt doesn't change anything.
Does anyone have experience with this?
Because so many websites are designed assuming a typical desktop-sized browser window, Mobile Safari renders pages at the default width of 980 pixels. To override this default so that it only renders websites at the width of the screen, use the following <meta> element:
<meta name="viewport" content="width=device-width">
I am testing a HTML5 webpage in iphone. Also used CSS3. The page centered in all browsers. But problem is in iphone. It is left aligned here. I was trying -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But no luck. Please help me about this issue. The URL is:
http://www.stonegardenbd.co.cc/projects/vapp
Thanks.
Try setting the body min-width. I found that when the width was set, that it didn't center the body in the iOS browser.
Here is an example:
body {
background-color:#0e7242;
color:#FFFFFF;
font-size:15px;
min-width: 1000px;}
div.content {
margin:0 auto;
width:900px;
}
One thing to note is that if you have the meta viewport tag in there, the user will have to scroll out to see the entire webpage. You may prefer to have the entire width be loaded, and the user scroll in to see the text.
my site is a small, 540x500px box centered on a page. iPhone and Blackberry are both cutting off the top of the content. I have it absolutely centered on the page. I've been messing with the meta viewport settings in hopes have getting the page's margins dealt with on other devices and have had some luck, but when it comes down to it i cant find a solution that combines both of my lines of code.
My code is below.. I've explored media queries, setting the meta to device-width (cuts off margins) and a host of other options. honestly, I know I'm being picky, and I've spent a stupid amo unt of time on this.
I need help!
First, the HTML
<div id="container">content</div>
CSS
#container {
width:540px;
height:500px;
top:50%;
left:50%;
margin:-250px 0 0 -270px;
position:absolute;
}
Meta settings
<!--<meta name="viewport" content="width=device-width, initial-scale=1">
cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
works for iPad-->
Apple recommends that any page below 980px be declared in width in your viewport settings.
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
Used a media query to adjust my negative margins for mobile use. 1024px is max resolution on an iPad.. which covers most tablets.
HTML heading
<meta name="viewport" content="width=500">
CSS heading
#media only screen
and (max-device-width:1024px) {
#container {
width:500px;
height:500px;
top:0;
left:0;
margin:0 auto;
position:static;
}
}
It looks like your negative top margin is cutting off the content.
I've found that mobile content works best when positioned in a linear, top down fashion.
If that is the only div on the page, use a mobile stylesheet to strip out the positioning, keeping only the width, height, and some smaller, simpler margins.
Then use something like <meta name="viewport" content="width=580">, setting only the width.
This has worked for me in the past.
I'm trying set up my mobile webpages for iphone but it fails to show the correct width.
The issue is..
In most of my page's posts they have pictures which have width about 480px to 500px
so if I setup up meta as follows:
1 = this will show all part of pictures in the post but the screen of page larger than iphone screen..
name="viewport"
content="width=480px; initial-scale=1;
maximum-scale=1; user-scalable=1;"
2 = this will show the pages correct with inside iphone screen .. but the right part of images will hidden to outside of screen width in stand mode.
name="viewport"
content="width=device-width;
initial-scale=1; maximum-scale=1;
user-scalable=1;"
Please help to set to show full images in iphone and the webpage zoom correct width of screen.
test use iphone at: http://www.xaluan.com/modules.php?name=News&file=article_mobi&sid=242186
You might want to try something like this:
lets say your html looks like this:
<body>
<div id="wrapper">
<img src="small-image.jpg" />
</div>
</body>
you can do this with your css:
/* you can modify this as you see fit */
#media screen and (max-width: 480px) {
div#wrapper {
max-width: 100%;
overflow:hidden;
}
img {
max-width: 100%;
}
}
Note: This will only work if you set a width on your wrapping element, like we're doing there. max-width is also fine for that. If you don't the element probably will stretch out with the image.
This will ensure that big images never become bigger than the element that wraps it, but smaller images will not be modified.
I have a mobile web application with an unordered list containing multiple items with a hyperlink inside each li:
My question is: how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accelerometer switches from portrait to landscape?
In portrait mode, I have the hyperlink font size set at 14px, but when I switch the device to landscape, it blows way up to 20px.
I would like the font-size to stay the same.
Here is the example code:
ul li a {
font-size:14px;
text-decoration: none;
color: #cc9999;
}
<ul>
<li id="home" class="active">
HOME
</li>
<li id="home" class="active">
TEST
</li>
</ul>
You can disable this behavior through the -webkit-text-size-adjust CSS property:
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
The use of this property is described further in the Safari Web Content Guide.
Note: if you use
html {
-webkit-text-size-adjust: none;
}
then this will disable zoom behavior in default browsers. A better solution is:
html {
-webkit-text-size-adjust: 100%;
}
This corrects the iPhone/iPad behavior, without changing desktop behavior.
Using -webkit-text-size-adjust: none; directly on html breaks the ability to zoom text in all webkit browsers. You should combine this with som media queries specific for iOS. For example:
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none;
}
}
As it was mentioned before, CSS rule
-webkit-text-size-adjust: none
does no longer work in modern devices.
Fortunately, a new solution comes for iOS5 and iOS6 (todo: what about iOS7?):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
You can also add , user-scalable=0 to turn off pinch zooming, so your website would behave like a native app. If your design brakes when user zooms, use this meta tag instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
You could also opt for using a CSS reset, such as normalize.css, which includes the same rule that crazygringo recommends:
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
As you see, it also includes a vendor specific rule for the IE Phone.
For current information about the implementation in different browsers, refer to the MDN reference page.
You can add a meta in the HTML header:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
As of March 2019 text-size-adjust has a reasonable support amongst mobile browsers.
body {
text-size-adjust: none;
}
Using viewport meta tag has no effect on the text size adjustment and setting user-scalable: no does not even work in IOS Safari.
The below code works for me.
html{-webkit-text-size-adjust: 100%;}
Try with clearing your browser cache if it does not work.
In my case this trouble has been because I used CSS attribute width: 100% for HTML tag input type="text".
I changed value of width to 60% and add padding-right:38%.
input {
padding-right: 38%;
width: 60%;
}