I want to exclude some HTML (basically, text ) when my PHP site loads on a smartphone. What's the best way to code that?
Thanks.
if "on a smartphone" means "on a small device", you could use Media Query , just with CSS.
<style>
#media only screen and (max-device-width: 480px) {
.hide-mobile{
display:none;
}
}
</style>
And use it where you want to hide at small devices:
<div class="hide-mobile">
Hey, this text is not visible at small devices
</div>
If you want to go really simple, just use mediaqueries in your CSS to make the div be display:none; for mobile.
#media only screen
and (max-device-width: 480px) {
.containeroftextyouwanttohide{
display:none;
}
}
Then the div holding the text you want won't show up on mobile. There are probably other ways to do it, but this is the easiest and probably best.
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
I have a wordpress site and I'm trying to make a style sheet for mobile devices but it doesn't seem to work. This is the code I used
<link media="only screen and (max-device-width: 320px)" href="mobile.css" rel="stylesheet" />
I used mobilephoneemulator.com to test the site but it doesn't seem to be using the mobile css. What is wrong? if it helps my site is http://www.deliciousmanga.com
Link to mobile.css normally <link rel="stylesheet" href=".....etc
Wrap the entire mobile.css stylesheet in this block
#media screen and (max-device-width: 320px) and (min-width: 0px), (max-width: 320px) {css goes here}
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;
}
}