Skip to main content

How to Show Content on Mobile Devices, Smart Phones and Tablets only

 There are two ways to do that, whether to use javascript or to use css style sheet.

Javascript: The code below will redirect the visit to a different page which should be a mobile theme page:

<script>
 <!--
  if (screen.width <= 699) {
  document.location = "https://www.mymobilepage.com";
}
//-->
</script>

 CSS: In CSS you can decide which part of your page to show or to hid on a mobile device ora tablet:


Show content on mobile devices and tablets:

The below div tag shows the content on mobile devices and or tablets:
 
<div class="showToMobile">
TEXT OR IMAGE FOR MOBILE HERE
</div>

The below css code contains the style class definition, this should be stored in your .css file on in your style sheet in the head section of your html page:
 
<style type="text/css">
  .showToMobile

   { display: none;}
   /* Portrait and Landscape Screens */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 699px)
   { .showToMobile { display: inline;}}
</style>


 

Hide content on mobile devices and tablets:

The below div tag hides the content on mobile devices and or tablets:
 
<div class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</div>

The below css code contains the style class definition, this should be stored in your .css file on in your style sheet in the head section of your html page:
 
<style type="text/css">
   .mobileHide { display: inline;}
   /* Portrait and Landscape Screens */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 699px)
   {  .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;}
Labels:

Comments

Post a Comment

Popular posts from this blog

Coldfusion Facebook Graph API publish to your wall and your friends walls

In this tutorial we will learn by full coldfusion Graph API code example how to publish on your wall and your friends walls. This application uses new oauth authentication method. The code is divided into four files: we will first start with a file called index.cfm: <cfoutput>         <!--- Your FB application IDS --->       <cfset api_key = ""/>     <cfset secret_key = ""/>     <cfset appID = ""/>     <!--- create a connection to the fb graph cfc --->     <cfset graphCFC = createObject("component", "graph").init(#appID#, #api_key#, #secret_key#) />     <!--- If user is authenticated or his access token is set create a cookie --->        <cfif not isdefined("cookie.access_token") and isdefined("url.access_token")>         <cfset cookie.acce...
29 comments
Read more

Implementation of Facebook Graph API in Coldfusion

Facebook has launched a new FB API called Graph that simplifies FB applications development, the new Graph API allows website owners to create Single Sign On (SSO) with Facebook and allow websites owners to be able to import a lot of users information but after their permissions. The code below written in Coldfusion gives an example on how to Create FB login/logout button and then how to retrieve the created cookie, and use it for further development:     <body>   <cfoutput>     <!--- Your FB application IDS --->     <cfset api_key = "XXXXXXXXXXXXX"/>     <cfset secret_key = "XXXXXXXXXXXXXX"/>     <cfset appID = "XXXXXXXXXXXXXX"/>     <!--- Facebook login/logout button --->     <p><fb:login-button perms="email,user_birthday" autologoutlink="true"></fb:login-button></p>     <!--- Facebook login/logo...
21 comments
Read more

The New Facebook Wall Publishing method Stream.publish

As recently facebook stopped supporting the feedstory publishing method to publish news on users wall and application developers from now on can't create feed templates. Facebook released a new methods to do so which are: FB.Connect.streamPublish stream.publish Facebook.streamPublish I figured out those new methods when I was building a new facebook application yesterday to predict who will win the soccer match between Egypt and Algeria tonight. It took me sometime to succeed in publishing the story on the wall, so I will share with you my experience and how I solved it out in Coldfusion. As I build my applications using the work of Andrew Duckett who created the Facebook Rest Client Component , I will start from FacebookFBMLCLient.cfc file which contains the methods that communicates with facebook APIs. As I have used one of the three methods above which sounded the best as I guess, this example will be based on stream.publish method. The first step is to add the following method...
16 comments
Read more