I have a website for my business coded entirely in HTML. No CSS at all. The problem is that every page except my index.html home page is scaling the text (on android) and reflowing it so that it is a readable size on the page.
So my question is: how would I go about making my website display properly on mobile devices using only HTML?
Have you evaluated if using a viewport meta tag would suffice for your needs ?
https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
I believe chrome supports the viewport tag as well.
It's not possible to build a responsive website using only HTML. You need things like CSS and jQuery to make it responsive.
If you post your code, I will give you a few examples on incorporating more of a responsive design.
Related
Hi I've got problem with responsive design because it's working in browser, when im changing browser size to small site is changing but when i'm going on site using mobile device or inspect element tool it's not changing. Here is demo of website: https://horrorfiles.htw.pl
I'm using tailwind css and react js, i made lots of projects using that and thats my first case.
I guess you need to read proper documentation and then apply the usual breakpoints for responsiveness here is the documentation of breakpoints and everything looks on good on your site.
enter link description here
I think the problem is you're using the breakpoint prefixes to target mobile devices instead of designing for mobile then using breakpoint to target larger screens. Tailwind's documentation has this: https://tailwindcss.com/docs/responsive-design.
I am doing web homework and the task is to replicate a webpage but with entirely HTML and CSS. The webpage should be static and should not resize as the browser window is shrunk. The problem I am facing is how can I make sure that the website will run the same on every device because the webpage looks different on my device and different on my friend's device.
I have used pixel values in CSS (not %) to implement the positioning of elements in the webpage.
Unfortunately, I cannot share the code on this platform.
Can someone help me point out how can I achieve the above mentioned with only HTML and CSS?
I believe it is happening because you and your friend are rendering the page in different browsers. WebKit & Mozilla rendering engines implement line-height differently. I suggest you add Firefox, chrome and any other browsers css specifically wherever there is a conflict in display in styling of element.
I am trying to make a webpage with HTML,css and jquery. But the problem is that the webpage is not working properly on phone or other small screen devices. Here is the link for the page.
The solution is quite simple. To have responsive layouts, use percentages for width/height and margins rather than pixels (px) so that they can auto-resize when the screen size changes. To make your bottom bike image look responsive, use width: 95% and height: 95% (or whatever other percentage you'd like). For the Bikerz icon, try using margin: Google Chrome's inspect feature is very useful so make sure to test it out on it. Simply right click on the web page and click Inspect. Once you are there you will see an icon left of the "Elements" section. When you click that, you can view your web page layout under different resolutions.
Either you have to write custom css to support mobile device or I will recommend to use Bootstrap framework in order make compatible your site on mobile. Bootstrap will allow you to developing responsive, mobile first projects on the web.
If you are going to use css then, i will also recommend you to validate your css support at different browser and mobile platform through canIuse.
I'm trying to design a mobile version of a website and the SELECT tag is displaying very tiny on the iPhone. Please see attached screenshot. I'm trying to design it closer to specs that client layed out in a photoshop file. Please see screenshot of how client would like it to appear. Any suggestions on how to make this happen? I've tried to use CSS to size width and height to no avail.
This is for a mobile website and not a native app.
iPhone preview:
Client mockup:
There is nothing much you can do to standard HTML select tag. I think you can achieve this by using some java script based UI components. Have a look at one of jQuery plugin called Choosen
I'm just reading up on how to develop sites with responsive layouts. I think I've grasped the idea and can now style content differently, depending on browser dimensions.
However I've also looked into Jquery mobile and I like the UI that they use.
My question is, is it possible to combine the two? ie. Could I have a web page that renders normally when viewed on a pc/mac, but when the browser width drops sub 320px (for example), could I switch over to using Jquery mobile?
I thought this'd be possible by including the jquery mobile scripts in my page, along with the 'data role' attributes, but only including the jquery mobile stylesheet if the browser is a particular size, ie:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
Is this at all possible? I can't tell whether I'm trying to use Jquery mobile for something it's not designed to deal with? Should I just have an entirely separate site ie. http://m.mysite.com that has standalone mobile content? Or is it possible to have an adaptive website?
Thanks!
Yes jQM Supports Media queries:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html (Grade A)
http://jquerymobile.com/test/docs/api/mediahelpers.html
http://jquerymobile.com/gbs/
that is a very interesting question...
The answer depends on factors like how differnt the 2 designs are like one below 320px and other above that..
If the difference is huge, having a separate mobile website is a good idea..
But if the difference is minimal, you can just handle that with the CSS Media Queries.
You can combine the CSS Media Queries with Responsive Web Design to handle different sized screens..
The question was not really answered as it was asked.
You cannot use JQM only on the mobile site and not on the desktop verion using only CSS media queries. You'd have to do completely separate sites and do a redirect.
A possibly better option is to use JQM on both mobile and desktop version, in which case CSS media queries work perfectly. The problem with doing that is it limits both how you can use JQM and how you design your site. You really can't take an existing modern desktop design and make it JQM.
The JQM demo itself uses media queries to turn it into a two column layout on desktop and tablet sized browsers, and single column on phones. Issues with doing it that way: the entire page acts like a page, meaning divs such as side menus transition and reload with a new page (which is why they only use the fade transition). Normal AJAX loading of content that doesn't involve the whole page will need to either be made to involve the whole page, or done custom outside the normal JQM way of doing things. Might not be too hard in some cases but it will up the JS code and make certain applications much more complicated. I can also see the CSS getting quickly out of hand for designs that are more complicated than the JQM demo.