草庐IT

Android 浏览器忽略响应式网页设计

coder 2023-06-07 原文

我刚开始使用“响应式网页设计”转换我的网站。我为 Firefox ( http://chrispederick.com/work/web-developer/ ) 安装了“Web Developer”插件来检查它是否正常工作。一切看起来都很好。

现在我用我的安卓手机尝试了这个。我没有在人像模式下正常工作...... 我将问题归结为对电话中@media-selectors 的错误处理:

此页面 (https://worldtalk.de/m/test.php) 生成一个 CSS，输出浏览器使用的高度/宽度和设备高度/宽度 + 方向作为参数。

我得到了以下结果:

  • 肖像，800x1200
  • 风景，800x400

方向正确，两个方向的宽度/高度和设备宽度/高度相同。 但该设备 (HTC Desire Z) 只是在纵向模式下使用了错误的屏幕分辨率 (800x1200)。我想避免使用用户代理或类似的设备数据库。

附加信息:

  • 浏览器版本:WebKit/533.1
  • Android 2.3.3/感知 2.1
  • HTC Desire Z(T-Mobile 固件)
  • JavaScript 报告相同的屏幕分辨率

问题:

  • 这只是我的手机型号还是安卓浏览器的一般行为？
  • 如何解决这个问题？

最佳答案

在对该主题进行更多调查后，我找到了以下解决方案。 您需要输入以下 <meta> -标签告诉浏览器禁用缩放。然后 CSS @media 选择器按预期工作。

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">

见:How can I "disable" zoom on a mobile web page? 和:http://garrows.com/?p=337 (编辑:http://garrows.com/blog/disable-mobile-browser-zoom-function

问候，

斯蒂芬

-- 编辑--

当应用上述解决方案时:对于某些设备，使用“scale=1.0”时报告的设备分辨率低于物理屏幕分辨率，您可能会出现图片模糊等效果。这是由屏幕的更高 dpi(每英寸点数)引起的。然而，JavaScript 中报告的屏幕尺寸是正确的。对于高分辨率的小屏幕，正确的“物理像素”分辨率可以通过以下方式实现:

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">

但是，这会导致 dpi 值较低的屏幕出现问题。使用 JavaScript 报告的屏幕分辨率似乎更安全。

-- 编辑--

使用逗号而不是分号来避免有关“视口(viewport)参数值“设备宽度；”的 Chrome 控制台错误对于无法识别的键“宽度”。内容被忽略。'

http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/

关于Android 浏览器忽略响应式网页设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12021794/

网页设计Android34noreferrerwidthcssresponsive-design

有关Android 浏览器忽略响应式网页设计的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  3. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  4. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  5. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  6. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  7. c - mkmf 在编译 C 扩展时忽略子文件夹中的文件 - 2

    我想这样组织C源代码:+/||___+ext||||___+native_extension||||___+lib||||||___(Sourcefilesarekeptinhere-maycontainsub-folders)||||___native_extension.c||___native_extension.h||___extconf.rb||___+lib||||___(Rubysourcecode)||___Rakefile我无法使此设置与mkmf一起正常工作。native_extension/lib中的文件(包含在native_extension.c中)将被完全忽略。

  8. Ruby - 如何在读取文件时跳过/忽略特定行？ - 2

    在读取/解析文件(使用Ruby)时忽略某些行的最佳方法是什么？我正在尝试仅解析Cucumber.feature文件中的场景，并希望跳过不以Scenario/Given/When/Then/And/But开头的行。下面的代码有效，但它很荒谬，所以我正在寻找一个聪明的解决方案:)File.open(file).each_linedo|line|line.chomp!nextifline.empty?nextifline.include?"#"nextifline.include?"Feature"nextifline.include?"Inorder"nextifline.include?

  9. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

随机推荐