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.
Related
I've been working on making my website responsive so other people on different devices can view it. I saw this code on W3schools to update the sizes and positions of my elements. [class*="col-"] I was wondering if you could change the col- to like * all or something? The reason I say this is because I want to select all my elements to edit them for phones.
If you want to make your website responsive for phones, you should take a look at CSS media queries:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
They offer the functionality for some specific styling to kick in, if the width of the device used to access your website matches X amount of pixels.
I'm trying to get a website I am working on to resize for different screen resolutions. It's currently set up for 1080p, but I want it to act like a normal website and resize to any resolution.
I have got all the content and links done, it's literally just the size of the website I want changing.
If anyone could help that would be great, thanks.
You can use media queries to make your page adapt to different screen sizes or you can use an existing responsive framework like Bootstrap http://getbootstrap.com/.
Since you don't have an example, this link might be helpful for the solution you are trying to achieve (the css style answer in particular):
Dynamically resize div based on size of browser window
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;
}
?>
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.