So I'm trying to do a basic phone number swap so the number is clickable on mobile but not desktop.
I've been working with the following code (mostly targets iphone):
CSS
#phone .mobile {
display: none;
}
#media only screen and (max-device-width: 640px) and (min-device-width: 320px) {
#phone .mobile {
display: inline;
}
#phone .desktop {
display: none;
}
}
in head (used from h5bp)
<meta name="viewport" content="width=device-width, initial-scale=1">
Chrome and opera mini work fine but Safari is displaying BOTH numbers.
I notice Safari makes all phone numbers clickable. Could this be something to do with it?
you can achieve this with some javascript/jquery
1) check the window width
2) if this is more than a certain amount of pixel, then you can output a link without href, otherwise add your tel:39000000 or whatever :)
Ciao
Fabio
Related
I just finished up the stylesheet of a website.
Then i thought of opening it up on my iphone and the design was totally screwed up.
This is nothing new really. But normally the solution is to add a min-width to my body.
But.. this time the iphone seems to ignore it.
Can someone please tell me what i am overseeing? I'm sure there is a simple solution!
Site can be found here:
http://77.72.144.173/~braaaf/index.php
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:
#media screen and (min-width: 769px)
{
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px)
{
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
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).
I'm making a mobile version of my application support site and I have a little WebKit/iOS/HTML/CSS problem here...
I have a page, index.php, with mobile.css file attached. In my <head> tag I have:
<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />
My body's css:
body {
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif;
margin: 0;
background: url(../../images/textured_bg.png) repeat;
color:#454545;
font-size: 14px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px;
width:100%;
}
Everything works fine in portrait orientation, but when I rotate my iPhone to landscape, Safari scales my content so it looks like in portrait, but a little bigger:
My question: Is there a way, without making custom css for each orientation, to force Safari not to scale my content?
The key part to fixing this isn't the meta viewport tag (though that's important, too, but for different reasons). Here's the magic that fixes the text size on orientation change.
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
(I got this from StackExchange's mobile CSS file.)
You will probably want to use the <meta name="viewport" .../> tag (see MDN docs and Safari Web Content Guide). The mobile Stack Exchange layout uses this:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
I tried commas, didn't work - then tried semicolons, that DID work. iPod touch, iOS 4.2
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%;
}
Is there any way to tell a UIWebView not to load images and CSS for faster rendering?
Solution: URL filtering for UIWebView on the iPhone
Use media queries. The first one says "if it is not an iphone, use the normal style sheet", the second says "if it is an iphone, implement style rule: don't display images" :
<link type="text/css" rel="stylesheet" media="not (max-device-width: 480px)" href="normalstyle.css">
<style type="text/css">
#media (max-device-width: 480px) {
img {
display: none;
}
}