Currently I am creating my own website and last week I worked on making the website responsive. I tried to make the website responsive for mobile devices and I thought that I fixed the problem, in HTML I added the following line:
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
But then I found out that it only works on Apple-devices but not on Android-devices. Do I need to add another line to fix the problem for Android-devices? Or change the line which I already have? Thank you in advance.
Since you were trying to make your website responsive to all devices, I putforth this information:
Bootstrap is a front-end framework for designing websites and web applications. Using Bootstrap framework you can design websites that can work in all devices ranging from Desktops to Mobiles.
All you have to do is download the framework and include it in your website and a little code could help.
You can download the framework here,
Bootstrap Download Page and then get some tutorials here
Hope this helps.
Related
I have developed I website for one of my clients when I check it by "Mobile/ Responsive Web Design Tester " chrome Extention it's pretty responsive but when I'm checking on my phone it's not responsive I have tried everything that I knew but couldn't find the problem any help will appreciate it
the site line is Link
HTML5 introduced the possibility of controlling the sizing through the meta tag. You can use this tag in your <head> to tell the device which scale to use on your content.
Try adding this into your page <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Source: https://www.w3schools.com/css/css_rwd_viewport.asp
I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
I recently developed a website using bootstrap 3 and it looked fine on my browser,i am using firefox and tried the responsive design layout in the developers tool and the website works fine all the nav-menus works great but when i uploded it for test and tried it with a mobile phone using multiple browsers but it doesnt look how it is suppose to look ,the nav-manus didnt shrink to the collapsible button so does anyone seem to know the problem ?any comment is help full thanks. I know i am suppose to post some codes but the code is a lot to be posted.
Write this code in the head if you didn't
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I tried searching for the better part of three days, but maybe I'm not asking my question right so I decided to try here.
I'm currently developing a website that I feel looks amazing, however on the iPad it's zoomed in with a ratio of 1 to 1 from the start. I cannot for the life of me figure out what is causing this problem. On other websites that I built the iPad simply scales the view to fit into its viewing area. But sadly that is not the case for this.
Here is the website currently
I'm developing on Wordpress, using the Genesis Framework. Can someone please lend a hand?
You should use the Viewport meta tag to specify how you want your website to behave on different screens:
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
It's the viewport meta tag that does this. Here's the one you are using:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
I'm in the process of developping a Web Application for mobiles. I
went with web applications because to me it seems a winning situation
having to develop one application that could run also on iPhone /
Windows Mobile / Palm etc.
I started testing today after a few days of doing concepts, ideas and
designs and what I wanted to do was have a menu that sticks at the
bottom of the page. Exactly like the menu on the bottom in this iPhone
application screenshot :
Using CSS, I though it would be really easy to do this. Only using
position:fixed; bottom:0; would have done the trick but I have found
it doesn't behave the same on mobile browsers
I tried to split my page in 2 sections : 1 would be a scrollable div
(for the content) and the other one would be the bottom menu.
Scrollable divs also do not work on Android. I also tried using frames
with no luck either. Does anyone know of any way to re-create a menu
that would stick to the bottom of a page for mobile phones?
On my Android N1 with CyanogenMod i had this trouble too and the fix:
<meta
name="viewport"
content="width=100%,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=no"/>
Specifically the user-scalable=no; part, you can also put 0 instead of no.
Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.
Just add:
<meta name="viewport" content="width=device-width, user-scalable=no" />
to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?
This is supposed to work :)
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.
I confirm that using the meta name in your html header
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up
and iOS 4 and up.
I made an example here:
https://dl.dropbox.com/u/908148/website/test-scroll.html