Getting very confused here!
I have a simple html page.
I would like to hide certain bits if a mobile device is being used.
How can I do that easily?
It would be the same page that is displayed, just certain bits moved around or hidden if on a mobile.
My issue is that part of the page is shown correctly on mobile devices.
However the bit that I wish to edit is a template within the site.
As a result I am showing the same adverts to mobile and desktop and the same data.
This means my widths are screwed up.
Therefore I really need to hide some bits from mobiles or probably small screens.
I am looking for something I can easily add to my html code.
With CSS media queries you can set rules to hide/show elements depending on screen width.
The best solution for detecting mobile devices is to use responsive web design concepts on your existing pages. CSS media queries can be used to define styles for devices of various widths.
Responsive design allows you to create one web page for both mobile and non-mobile users.
Concept of User-Agent can be used if you want to target limited devices.
Example PHP code
<?php if (
stristr($ua, "Windows CE") or
stristr($ua, "AvantGo") or
stristr($ua,"Mazingo") or
stristr($ua, "Blazer") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='mobile/index1.php';
header ('Location: '.$location);
exit;
}
?>
Related
I created a page in html page from my PC here is the link http://evaluations.tk/.
My question is do I have create separate page for both mobile and pc, if I have to create separate page then how can I set different previews for pc and phone. For testing I added meta tag but when I see that page on phone it make the objects very large. Can anyone help me...
No need to change in program.but you need to apply bootstrap css to all pages.
Bootstrap basically does is adjust the size of page as per the size of the screen..
Thanks Vote :P
Like Yogesh Suthar's answer; bootstrap is your friend when dealing with responsiveness of your websites. By the use of the column grid structure, you can make your site responsive to different screen sizes. If you would like to have some more customisation, you can also create bootstrap-like behaviour with css by employing media queries (e.g. #media screen and (min-width: 400px){color: red;}). Basically, you define the layout for mobile first and then gradually add styling for larger screen sizes.
i have designed 3 different designs for my website. one for mobile , one for tablets and one for desktop. is it possible to load these html(index) pages according to the screen size. i.e i want mobile.html to load when viewing the website on a mobile. similarly for tab and desktop. i know about the media queries for css . but wanted to know is there a way to load different html pages according to the screen size. THANK YOU in advance.
1) You can use Php or javascript to load an HTML file/content accordingly
2) use media queries, which are quite useful in this case. All you need t have is different CSS/styles based on different screen sizes. They won,t load a new HTML....
I have a website which is working well on PC. Now I want it can be displayed on mobile phone like following:
Align left and display only 1024px from left.
The rest part:
1) The rest part can be kept and user just only need to drag to see the content. This will be the best, and if this happen, it is only need to do some zoom in and out work. But I found it is really difficult to make it working properly on all mobile web browsers.
2) Do not display the rest of part. This is also an acceptable option.
Thank you very much if you can give any advice.
Sure you can do almost whatever you want if you adjust your website to be responsive to different screen sizes and user agents. Media queries will help you adapt your website greatly to different screen sizes, media types and orientation
I would highly recommend converting your website in to using Bootstrap. It makes it responsive, so you should not have any trouble with the mobile view at any point.
From the developers view the Bootstrap offers many and much more to the website creation. No need to hazzle around with the percentages or make entire new pages for mobile phones, one page does it all.
I'm not familiar with responsive websites and would like to start creating a website taking all the screens into account.
Obviously media queries is the way to go but they only concern CSS.
In my current project, I would like to organise the page differently according to the width of the page (being completely device agnostic).
The thing is, on small widths, I would like the HTML layout to change completely so I will have to make the HTML "responsive" as well as it should change according to the website width.
How can I achieve that?
Is there any js library (jQuery if possible but not mandatory) that will "serve" another html page according to the width of the page?
The whole website should be build this way so the script should be more than a gadget, it should be rock solid enough to allow the whole website to rely on it.
And, of course, it should work on any device or screen or browser.
Some would say that I'm looking for adaptive techniques more than responsive ones but I believe it's a mix between those two as the elements will still be responsive in general but between some critical breakpoints, it will indeed adapt and change the html.
I read a lot about different techniques but I can't find something that suits my needs.
Any lead would be appreciated.
Thank you for your help.
What you are describing is adaptive delivery. What you want to to is detect the user agent string using a server side language, and then conditionally render your templates according to whether the device is a phone, tablet, or desktop. Realistically, you'll share a lot of code between the screens, but you might have a different navigation layout, or opt to not show more rich features on the smaller screens. This approach not only saves a bunch of hide/show code, but saves a lot of overhead on smaller screens where you would otherwise be loading stuff that would be hidden the entire time anyway.
You can do a lot with CSS and media queries to alter your page layout ("completly") depending on device and screen width. If I were you I would dig a little deeper through the possibilities these techniques can offer.
If you are positive this is not enough. I would look into Redirects and User-Agent Detection to redirect your users to a different page depending on the user-agent.
If you are looking for a full framework that can handle both what you need (redirecting and dynamic content depending on user-agent or width) and a whole lot more, you should look into AngularJS.
You CAN of course do some DOM manipulation with pure JS depending on your criteria, but as your project gets bigger you might be in for a world of hurt.
Is it possible you could use an existing CSS framework such as Bootstrap to achieve a responsive design across your various target browser widths and device types?
Bootstrap in particular will let you specify different layouts depending on the device width where the page is being rendered. More information here - adjust your browser width to see it in action.
If, after evaluating an existing framework, you're still determined to develop your own you can perhaps at least use the techniques in Bootstrap or another framework as a starting point for your own.
try Bootstrap
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
I do not know if it is sufficient to your project, but you can to some extent use CSS to control what markup you would like to show or hide on smaller or larger devices. For example:
<div class="mobile-only">
<p>This content will only be visible on small screens such as mobile devices</p>
</div>
<div class="tablet-up">
<p>This content will only be visible in tablet and larger devices</p>
</div>
/* media query for small screens, such as mobile devices */
#media screen and (max-width: 767px) {
.tablet-up {
display: none !important;
}
}
/* media query for tablet and larger devices*/
#media screen and (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
But be sure that you do not use this technique if you have a really big project, you might be ending up choking performance.
To be more specific, I have a single column Tumblr blog. I don't want to use a generic "mobile friendly" theme when someone hits it from a mobile device. I want the single column to fill the width without stretching the width of the content or making the font size larger.
Essentially, I want to "zoom" to the content without the user having to double-tap the screen.
You need a couple of things:
You need a mobile-only CSS file to change the stylings (usually simpler, with fewer or smaller images). You can use the "#media" tags to accomplish this. Here's a good article on this method: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Make sure you use "meta viewport" tags to set the width of the page. This will properly "zoom in" on the text that you're talking about. It tells the mobile browser how wide the page should be. Here's more information on the topic (specifically for iOS, but the tag can be read by other mobile browsers): http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
You're going to have to use a special mobile friendly css if you want different behavior on a mobile browser. It doesn't have to be in a separate theme though.
You can preface a css rule with #media only handheld to make it target mobile devices with small screens only.
Give us your css and html and I'll give you a more exact answer.