Hi there! I've been trying to redesign a mobile site, I want to have a different landing page and navigation design which can be toggled apart from the responsive design I have now.
I've tried to make a menu button that shows up only on the mobile site by using Mobile Site Detect plugin, so when the view clicks it, it will toggle the navigation.
This is the code I've been trying to structure below, but it is not working for some reason, I'm assuming something may be missing in there. If anyone can have a look at it and give me some help or tips, I'll be really grateful.
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
if(jQuery.browser.mobile)
{
"nav".hide();
"#navtoggle".show();
event.preventDefault();
}
else
{
"#navtoggle".hide();
"nav".show();
event.preventDefault();
}
$( '#navtoggle' ).click(function() {
$( 'nav' ).toggle( 'blind' );
});
Also, if anyone can give me a tip on how to redirect the landing page to other page of the website on mobile site? Once I make the mobile detect plugin work, then what code am I supposed to use? Can anyone let me know? I remember there was something I could use, but can't find it... :(
Any help will be much appreciated! Desperately looking for some expert advice! Thank you!
If you want a view responsive to the device you have the following options:
Hide and show UI elements depending on the used device using CSS
Render the intended UI on server side based on UserAgent string
Well, go with JavaScript
Solution with CSS
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#selector {
/* rules */
}
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
#selector {
/* rules */
}
}
Solution with JavaScript:
Use that method to detect mobile browser
Detecting a mobile browser
Related
I'm using enquire.js so I can use CSS media queries with javascript instead of event listener on resize, which is tough for web performance.
I created an event which triggers scrollWindow(), which needs to be applied ONLY if the mobile phone is on portrait mode. On landscape mode, no matter which device on landscape, this event needs to be removed. I really tried different formulas with the media query and I checked the internet and could not find one solution that helps me...
This is a responsive project but if it helps I have to target at least Samsung Galaxy S3 and iphone4. Here below I insert you the code I have as for this moment:
enquire.register('screen and (max-height: 640px) and (orientation: landscape)', {
match : function() {
window.removeEventListener('scroll',scrollWindow);
},
unmatch: function(){
window.addEventListener('scroll',scrollWindow);
}
});
I think I'm reading your question correctly, so let me try to explain...
The way enquire.js works is that unmatch is only called after match has fired at least once.
So in your instance, you just need to invert your problem - have your media query test for portrait orientation, and add the event listener on match, and remove it on unmatch.
enquire.register('(orientation: portrait)', {
match : function() {
window.addEventListener('scroll',scrollWindow);
},
unmatch: function(){
window.removeEventListener('scroll',scrollWindow);
}
});
Hope that helps
Getting close to finishing this WordPress website: www.the-hind.com, which displays fine on desktop browsers, but my only issue is that on iPhone ONLY the the sidebar on the right is pushed at the bottom of the page. I tried so many things in CSS but probably have been looking at it for so long that can't see the answer.
I'm sure (wishful thinking) that the solution is something simple & obvious, for an expert like YOU.
Looking forward to any help you can offer.
Your theme is Fully responsive by definition ( http://wordpress.org/themes/blaskan ) and this is how it is supposed to work ( it will not happen only in iPhone, but eventually in any device.
If you want to change it you should change the css file :
http://the-hind.com/wp-content/themes/blaskan/framework.css?ver=3.5.1
with the relative parts of the media queries :
/** =STRUCTURE MIN: 480px ----- */
#media only screen and (min-width: 480px)
and :
/** =STRUCTURE MIN: 768px ----- */
#media only screen and (min-width: 768px)
to understand more read here and also here or search "media queries" on google ..
The "iPhone only" will be due to screen-size. There will be other devices it happens on. So the key is to edit CSS and add the various sizes. While making your changes, test on all device sizes.
Try using this online and free tool which allows input of any sizes then the testing of multiple screens at once...
Responsive Design bookmarklet by Benjamin Keen
If you want a really nice and clear tutorial try this...
Responsive Web Design by Shay Howe
I'm working on a webpage for a client and I'm creating a mobile responsive version for them.
I've worked through most of the website, however, upon loading my 'Services' page, there is an eyesore of a gap all along the right side of the page. Strange, because it uses the same CSS as all the other pages, which all display at full 100% width.
Devices tested with:
iPhone 4 - Chrome, Safari
iPhone 5 - Chrome, Safari
I've also tested this with a Samsung S3, but in Chrome it seems to load fine.
In addition, I've tested it using the Safari developer tools and inspected the page.
It seems as if the HTML from the get go isn't conforming to the 100%.
I've got no idea how to fix this!
The page is http://temp3.advisible.com.au/services
Thanks in advance!
I've managed to solve this problem for anybody who has this issue in the future.
I used a Wordpress page selector and changed the html width of the page.
A messy solution, but it works.
<?php
if (is_page('services')) {
echo "<style>
#media only screen
and (min-width : 320px)
and (max-width : 480px)
{html {width: 340px; }}
</style>";
}
?>
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.