I've finished my web page with its style sheet, not sure how it didn't work on phone browser because it work on laptop browser.
It worked when I put it on free web host and then open it with phone browser, but when I put it in phone storage, none of the CSS applied
moved the CSS file (prev href='folder/style.css') to href='style.css'
also use vendor prefix (-moz-,-webkit-,-ms-)
simple solution of this problem,
first open file in laptop and inspect your website or page then use responsive button which look like mobile.
and your css isn't apply because some mobile phone features are not able to show website as like our laptop tablet or pc.
some have this type of feature like in MI mobile.
hope you understand...!
Related
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode.
You can change the screen size and see how it looks on mobile or tablet sized screens.
If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/
If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)
In Chrome (ctrl+maiusc+i + emulation)
In this page you can select the device to view.
You have a lot of options to test it, but each option has it's benefits.
You can minimize the browser!
You can use device mode from chrome,mozilla etc
You can find a lot of online responsive site testers for any resolution you want
In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.
There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.
To do this kind of testing, you can use tunneling - products like https://serveo.net/ or ngrok.
I use http://www.responsinator.com
Very easy and complete, several types of mobile and table devices.
I have a live site at http://www.factormedia.co.za
When you inspect it to phone scale (around 350px width or so) it loads 3 icons in the menu, of a house,laptop and notepad.
However if you had to actually use a phone the images do not appear. So trying to figure out why it is not referencing my font library from fontastic.com.
Works fine in a preview but on the actual device itself.
It seems when you embed using the link they give you works when testing and using anything from a laptop to a desktop, once you scale down it starts to give issues to mobile. To solve this issue the easiest way was to manually download the icons I was using and use them as their own custom font by installing it as the site instructs.
This then solved the problem and it now shows on smaller devices
I have a project to do and I am desperate for a site that would show me how a mobile website would look with the code I have. The problem is i don't have a website url that I can use it on that will show the images provided with it.
Thanks,
Adam
You can use emulation feature of Google Chrome. Open your web page and hit Ctrl+Shift+J to open dev tools. There, click on a "drawer" icon (third from the right) - it will open the drawer panel. There, use "Emulation" tab - it will allow you to select from different various devices. Chrome will emulate screen resolution, input, and User Agent string.
Take the page on your desktop and resize the window to resemble the size of a mobile device. Pretty much you are making the window the same pixel size of a mobile phone's browser.
As far as the pictures go, you would need a url. You may be able to use this
http://jsfiddle.net/
In firefox you can use the responsive design layout using the command " ctrl+shif+m " .
This comes configured with default ranges for devices.
You can also install "web developer tool" in firefox and chrome . It has a "resize" tool that will show your page in mobile and tablet views also .
I have two domains that point to the same directory. If a mobile is detected it will show a mobile version of the site via PHP. This changes some of the HTML and the stylesheet.
If I go to
maredovisning.com
The mobile version works without issues. However if I go to
maredovisning.se
The mobile version is broken, it seems like the viewport is not working correctly but I am unsure as to what the actual issue is?