I've been working on this site for a school project for a week now. After I update in DreamWeaver, and verify it looks good in the different view modes (desktop, tablet, mobile), I put the changed files to the server and check it out live on my devices.
Recently, the live viewing stopped being responsive on mobile devices. Works great on desktop, but the mobile is the same as the desktop now, and I've been racking my brain trying to figure out what I've done. If it makes any difference, my mobile device is an iPhone 5S. I've been using my boyfriend's iPhone 6 for testing too, and it does the same thing.
Link to my site: www.jordanmiller.newbedesign.com/cafetownsend/index.html
Link to my files via DropBox: http://tinyurl.com/pdjuogr
Note: only the Home and Cuisine links are currently up (still working on the other two).
Also, just an fyi, I am pretty novice to this. Stackoverflow and Google have been my best friends throughout this class. So I apologize in advance if any of my markup (especially the CSS) is messy and unorganized.
Related
I am using an Availability Calendar plugin on my small cabin rental website, for which I am building a mobile version of (using Bootstrap).
The arrows appear fine above the calendars on the desktop site here,
but they do not appear in the mobile page here (note that they do seem to appear and function correctly in desktop browsers, just not in mobile browsers).
Any assistance or advice anyone could provide here would be greatly appreciated.
Thanks!
k
For week's now I can't figure out why my site is designed to be responsive, is everything right and laptop works perfectly even when put in a small size and then step into my mobile and is not responsive.
I've tried uninstalling the plugins, I changed the theme and not find out why.
Can you held me?
The website is: moinhodocomandante.com
Thanks for your atention,
Catarina
Unless you are intentionally trying to send your mobile users to dubious porn websites, my guess is that your site has been compromised. Lucky for you it has been poorly compromised and it is only breaking the page instead of displaying the ads/redirects.
To verify this, put your browser in developer mode and switch to mobile emulation and look at the network tab.
Without knowledge of your limitation, I cannot recommend any measures for cleaning up the compromise, but consider disabling every plugin and upgrading WP. It looks like every single call to a CSS file by your plugins gets redirected to something nefarious.
Is there is any way to test website on IPAD AIR only. Without having it.
Also what media queries i need to do for fixing css issues.
i found IPAD AIR is having resolution of 2048x1536
Can anybody help me out
Thanks
There are many websites that provide this sort of service!
This website (Mobilephoneemulator) does this service, it seems to support the Ipad Air at the resolution that you specified.
To use it, first select the rough size of your desktop monitor, then select 'Ipad Air' on the devices pulldown on the right. You can then navigate to your website using the url bar right below it.
Just go here and type in your website address: http://www.modelmanagement.com/models/male/ukraine?page=2
There are many sites like this.
To fix css issues with media queries learn to use bootstrap See this tutorial.
So I’m drinking the Kool Aid and trying to create a responsive ASP.NET website using VS 2013 and Bootstrap, and I’ve hit a problem I don’t understand and don’t know how to deal with.
The site seems to be coming along pretty well, and all the Bootstrap stuff appears to be working properly when I view the site in a web browser and in the various Windows Phone emulators. The problem is that the site does not behave properly when I view it on my actual, physical, Windows Phone.
My phone is running Windows Phone 8.0, and the emulators claim to be emulating WP 8.1. I’m assuming that this would explain the difference in behavior, but I’m not sure and I don’t really know how to figure this out.
To simplify the problem, I created a blank ASP.NET Web Application in VS, and copied enough stuff from Site.Master into Site.Mobile.Master so as to create a Bootstrap navbar. I then uploaded the whole thing to Azure so as to be able to view it online.
Apparently I cannot post images up here nor can I post more than two links, so describing what's going on is a little bit of a challenge.
I’ve shared a folder on OneDrive that contains the two screen shots and Site.Master and Site.Mobile.Master from the project. I haven’t modified any other files. The folder’s address is http://1drv.ms/1lCW0TA .
In this folder, you'll see "Emulator Screen Shot.jpg" which is what the page I created looks like in the 8.1 emulator. You'll notice that the top navigation bar is pretty much what one would expect from a Bootstrap site.
You'll also see "Phone Screen Shot.jpg" which is what the same website looks like on my mobile device. Note that the top navigation is a mess.
If you want to look at it on your own device, the address is http://mobilemenus.azurewebsites.net.
So, my questions are,
1) What’s going on here? Is the browser in WP 8.0 not capable of rendering this stuff properly? Or am I doing something incorrectly that’s causing it not to work?
2) More importantly, how am I supposed to fix this? Given how simple this example is, I’m having a tough time believing I’m the only person in the world to be having this problem, but I can’t find any discussions of this issue online.
The website works fine on my Kindle. Unfortunately I don’t have an iPhone to test on, so I don’t know what it looks like on an actual iPhone.
I was hoping to finish this and get it deployed in the next couple of weeks, and it would sure be nice if it worked properly on existing Windows Phones.
Thanks in advance for any help.
-Rob
This looks like it is working exactly as it should. You are most likely using an emulator with a small screen resolution. The default emulator uses an 480x800 screen resolution. Your device has a resolution width of 768x1280 (value obtained from your screenshot. You can change bootstraps logic to not have a min/max width of 767/768 with some css. I've gone as far as just changing my local copy of bootstrap.css by doing a find/replace. You can also create a new css file that overrides certain values. You'll want to load that css file after the main bootstrap css.
A handy way to test screen resolution is with Chrome. Hit F12 to open the debugging tools and as you change the size of chrome, it will display the resolution of the page in the top right corner.
This is a well-known bug on Internet Explorer 10 for WIndows Phone 8.
Since you're using ASP.NET you have the chance to fix it server side once on your master page.
var style = new StringBuilder(
"<style type=\"text/css\">" +
"#-webkit-viewport{width:device-width}" +
"#-moz-viewport{width:device-width}" +
"#-ms-viewport{width:device-width}" +
"#-o-viewport{width:device-width}" +
"#viewport{width:device-width}");
var browserCapabilities = Page.Request.Browser;
if (String.Compare(browserCapabilities.Browser, "IEMobile", StringComparison.OrdinalIgnoreCase) == 0 &&
browserCapabilities.MajorVersion == 10 && browserCapabilities.MinorVersionString == "0")
style.Append("#-ms-viewport{width:auto!important}");
style.Append("</style>");
var placeholder = new Literal {Text = style.ToString()};
Page.Header.Controls.Add(placeholder)
Here's the whole article to fix the windows phone bug.
Back in the past,
i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...
So is there any webpage or application where i can see how my webpage looks like in different resolution?
And here are the resolutions i would like to check for..
1. 1024x768 24.56%
2. 1280x800 22.06%
3. 1280x1024 13.42%
4. 1366x768 7.10%
5. 1440x900 6.68%
Perhaps you're thinking of http://browsershots.org/ ?
Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.
It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.
If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.
For viewing which percentage of people sees how much of your web page:
http://browsersize.googlelabs.com/
Also: Web Developer plugin for Firefox (Resize menu).
Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...
There is one more online tool called ScreenFly which is very good and you can even check for tablets, TVs, mobiles.. screenfly
There are many utils available for watching your website in different resolutions.
Some are installed on PC, some are online services like these:
Adobes "render browser" - you'll need to create a free Adobe account:
http://browserlab.adobe.com
Nice, but not free if you want it fast as I recall it:
http://browsershots.org/
Google - shows what part of your website is visible based on statistics from Google:
http://browsersize.googlelabs.com/
But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.
If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.
You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.
Regarding your question, the % you list, seems like you would have most use of the "Google" link above.
Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:
Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)
Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)
Google Chrome (awesome debugging tools too, and a very stable browser)
Safari (so you make sure that you support MacOSX)
Thats my opinion.
The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.