How to Display Ads Only Mobile Viewers
Display Ads Only Mobile Viewers
Here are some simple steps you can take on your own landing pages to insert and hide ( Display Ads Only Mobile Viewers) certain text or images exclusively for mobile viewers.
Choose your test and pick your landing pages.
Decide on what you would like to test out with this functionality. What might your mobile viewers want to see on your landing pages that would be different than your desktop viewers? Some test ideas to consider include:
Recommended: How to make money on Binance using $1 for beginners
Display Ads Only Mobile Viewers / hide for mobile viewers.
Depending on the test, you may also want to suppress certain content for desktop users, such as longer paragraphs or images that may not work as well for mobile devices.
Show content on mobile devices.
This is where things get technical. To insert text or images specifically for mobile on your landing page, simple add the following code in the HTML <body>:
<div class=”mobileShow”>
TEXT OR IMAGE FOR MOBILE HERE
</div>
This div will declare that this copy will respond only when the class is triggered. By adding the code below, the class will only be triggered when the user is on a mobile device. Add the following code in the HTML <head> section of your page:
<style type=”text/css”>
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}
</style>
Hide content on mobile devices.
To hide certain text or images that will not display on mobile devices, you will add similar code as before in your HTML <body>:
<div class=”mobileHide”> TEXT OR IMAGE NOT FOR MOBILE HERE </div>
Then, you will want to add the following code to your HTML <head> section:
<style type=”text/css”>
.mobileHide { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>
If you want this styling to apply to your entire website, add the following to your CSS stylesheet:
.mobileHide{ display: none;}
Test your mobile codes.
Once you have your tests set up, including the text/images you will hide and unhide for mobile viewers only, it’s important that you test out the page on a mobile device yourself.
#how to Display Ads Only Mobile Viewers #Display ads only mobile viewers iphone #Display ads only mobile viewers android #mobile ads examples #Display Ads Only Mobile Viewers
Comments
Post a Comment