Beginning of this post I should tell you that browser hacking or detection is not always needed. I never recommended using browsers hack or detection for managing the structure where you probably have some basic structure issue.
First we need to try with good basic structure for that try to mention clear after every row where float has been used and don’t use unnecessary floats for every element which I found some tendencies for the designers. Try to use inline-block instead of float. All of above you should mention the Semantic HTML structure which is must for every browser. Internet explorer is one of the most safest browser in the market, so lots of people from bank and govt sector use it as their default bowser.So we need to support our design in this browser too.
Now some CSS modern properties are not widely compatible with different versions of IE for those cases I recommend to use Modernizr which I found one of the best tools in the market. The job of the Modernizr will discuss later in this serial posts.
So we can use this JavaScript function for the situation like a particular div or anchor tag taking too much space in mobile but working fine in Desktop or laptop, and in Iphone the phone number automatically converted to anchor tag for user friendliness and user can tap on the number and call directly. Now perhaps you are not mentioning the anchor color or size.
JavaScript function:
Now you need to call the mobileDetect(); function asper your requirement, like if you need detect windows phone then call mobileDetect.windows(); and it will return true when its load into a windows phone, else its return false.Same for others Android,ios and others.
Now if you don't need to detect any specific OS then just call the function mobileDetect.anyMobile(); and it also return the true value for every mobile or tab.
On ios an anchor taking too much height, so we need to detect first what actually height it takes, after that we can change the css or add attribute i JavaScript function.
Please subscribe for our future posts.
First we need to try with good basic structure for that try to mention clear after every row where float has been used and don’t use unnecessary floats for every element which I found some tendencies for the designers. Try to use inline-block instead of float. All of above you should mention the Semantic HTML structure which is must for every browser. Internet explorer is one of the most safest browser in the market, so lots of people from bank and govt sector use it as their default bowser.So we need to support our design in this browser too.
Now some CSS modern properties are not widely compatible with different versions of IE for those cases I recommend to use Modernizr which I found one of the best tools in the market. The job of the Modernizr will discuss later in this serial posts.
Post1: Mobile Detection through Javascript
Now in this post I am going to discuss the mobile detection through JavaScript. I personally found that we are spending huge time for portable devices design and JavaScript issues. Te big reason is their console are not so user friendly that we can identify and resolve the issue.So we can use this JavaScript function for the situation like a particular div or anchor tag taking too much space in mobile but working fine in Desktop or laptop, and in Iphone the phone number automatically converted to anchor tag for user friendliness and user can tap on the number and call directly. Now perhaps you are not mentioning the anchor color or size.
JavaScript function:
mobileDetect = {
Android: function () {
returnnavigator.userAgent.match(/Android/i); // Detecting the android phones
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
anyMobile: function () {
return (mobileDetect.Android() || mobileDetect.BlackBerry() || mobileDetect.iOS() || mobileDetect.Opera() || isMobile.Windows());
}
};
Details:
Now we have a function mobileDetect() which stands for the detecting mobile by its OS, we have the most populars OS like android, windows, iOS etc.If you need to detect any other OS then please add by its userAgent.Now you need to call the mobileDetect(); function asper your requirement, like if you need detect windows phone then call mobileDetect.windows(); and it will return true when its load into a windows phone, else its return false.Same for others Android,ios and others.
Now if you don't need to detect any specific OS then just call the function mobileDetect.anyMobile(); and it also return the true value for every mobile or tab.
Use
Now i the script on the of true you may add class to a specific div or call a function which will work only for mobile or tab.if(mobileDetect.any())
{
$('someelement').addClass('class'); // add class to the div.
someFunction(); // Calling th custom function
}
function someFunction(){
alert('SomeFunction');
}
OROn ios an anchor taking too much height, so we need to detect first what actually height it takes, after that we can change the css or add attribute i JavaScript function.
if(mobileDetect.iOS())
{
alert($('.someelement').height()); // Detecting the height of some element
// Run your function based on the result.
}
Thanks for visiting.Please support us by shearing our posts and like your social pages.Please subscribe for our future posts.
No comments:
Post a Comment